md-progress-linear: IE 11 Flickering, Constant resizing of md-dialog container width #2364
Comments
ThomasBurleson
added
the
for: internal contributor
|
Just tested this out with the latest |
|
@Splaktar - Wish I could confirm, but I still have it in the horizontal direction in the CodePen I referenced and with IE 11 (v11.0.9600.17842). Here's a GIF of what I'm seeing on my screen under IE11: IE11 It is definitely still flickering in the horizontal direction. You can see the effect on the entire dialog layout by looking at the buttons, especially, along with the slight blurring of the text as well. I'm referencing the bower-material Chrome I believe in Chrome this is "absorbed" by the layout which doesn't cause the dialog itself to horizontally resize, but in IE11 this constant changing of the width (?) of the bar by a pixel back and forth is causing the horizontal resizing you see in the GIF. What is interesting is I don't see this resizing behavior in Chrome on the demo page for the MD project...just in the custom dialog in my CodePen, so there must be something happening in my layout for the problem to be triggered. Thanks. |
|
@Londovir I am not seeing that on Windows 7 with IE 11. What version of Windows are you running? Do you have all of the latest Windows Updates applied? I'll look into this a little more when I have some time. |
|
You may be on to something. I just checked a Windows 7SP1 x86 VM I have running IE11 (11.0.9600.17843), and it is rock steady as expected. I don't even get the odd vertical 1px change in progress bar height like I see in Chrome as you see above. I will check my Win10 Insider Edge VM tomorrow at work to see if it is being replicated there. It does appear in my Win8.1 IE (Metro Mode) as well - and on more than one Win8.1 machine - so it is unlikely to be a specific graphics card driver or some other issue that I can think of, as it is happening on a variety of Win8.1 machines. |
…ons, perf upgrades
synchronize progressLinear with similar logic used in progressCircular.
* improve animation performances
* watch md-mode for changes
* refactor animation SCSS
* enable hiding and no-animations with undefined/empty md-mode attributes
* for both indicators, use `display:inline-block;`
* update demos with enable switch
* fix query mode
* update Select to use enhanced progressCircular component
* fix autocomplete styling of progress-linear.md-mode-indeterminate
BREAKING-CHANGES
Before:
```css
md-progress-linear {
display: block;
}
md-progress-circular {
// display not set
// position not set
}
```
```css
md-progress-linear {
display: inline-block;
position: relative;
}
md-progress-circular {
display: inline-block;
position: relative;
}
```
Fixes #4421. Fixes #4409. Fixes #2540. Fixes #2364. Fixes #1926. Fixes #3802.
…ons, perf upgrades
synchronize progressLinear with similar logic used in progressCircular.
* improve animation performances
* watch md-mode for changes
* refactor animation SCSS
* enable hiding and no-animations with undefined/empty md-mode attributes
* for both indicators, use `display:inline-block;`
* update demos with enable switch
* fix query mode
* update Select to use enhanced progressCircular component
* fix autocomplete styling of progress-linear.md-mode-indeterminate
* auto-inject md-mode attribute if missing
* use 'determinate' if value attribute is defined
* otherwise use 'indeterminate'
* $log.debug() notify user (via $log.debug) of injection
* add API doc details regarding md-mode auto-injection
* fix tests
BREAKING-CHANGES
Before:
```css
md-progress-linear {
display: block;
}
md-progress-circular {
// display not set
// position not set
}
```
```css
md-progress-linear {
display: inline-block;
position: relative;
}
md-progress-circular {
display: inline-block;
position: relative;
}
```
Fixes #4421. Fixes #4409. Fixes #2540. Fixes #2364. Fixes #1926. Fixes #3802.
…ons, perf upgrades
synchronize progressLinear with similar logic used in progressCircular.
* improve animation performances
* watch md-mode for changes
* refactor animation SCSS
* enable hiding and no-animations with undefined/empty md-mode attributes
* for both indicators, use `display:inline-block;`
* update demos with enable switch
* fix query mode
* update Select to use enhanced progressCircular component
* fix autocomplete styling of progress-linear.md-mode-indeterminate
* auto-inject md-mode attribute if missing
* use 'determinate' if value attribute is defined
* otherwise use 'indeterminate'
* $log.debug() notify user (via $log.debug) of injection
* add API doc details regarding md-mode auto-injection
* fix tests
BREAKING-CHANGES
Before:
```css
md-progress-linear {
display: block;
}
md-progress-circular {
// display not set
// position not set
}
```
```css
md-progress-linear {
display: block;
position: relative;
}
md-progress-circular {
display: block;
position: relative;
}
```
Fixes angular#4421. Fixes angular#4409. Fixes angular#2540. Fixes angular#2364. Fixes angular#1926. Fixes angular#3802. Closes angular#4454.
Relevant CodePen: http://codepen.io/londovir/pen/PwMMZJ
Under Chrome, an md-progress-linear that is embedded within an md-dialog component will show a slightly resizing (likely due to the transformX/scale CSS transformation done for a "determinate" style md-progress-linear) every time the attached value attribute is changed. However, the overall outer md-dialog will not resize accordingly. In addition, there is no apparently "flicker" of the darker colored progress bar portion as it is redrawn/resized by the CSS transformation - it smoothly glides smaller or larger.
Under IE 11, the exact same CodePen is causing multiple issues. The dark color "value bar" flickers out of existence before coming back, making for a jarring visual experience. In addition, the outer md-dialog component visually resizes in the horizontal (and often vertical) directions, causing a noticeable "shiver" of the md-dialog component it's embedded within. We have tried various combinations of wrapping different elements in outer DIVs with various attributes to try and prevent this layout resizing from taking place, but nothing has yet worked that doesn't mandate a fixed size for the outer md-dialog, which we are trying to avoid if possible.
The text was updated successfully, but these errors were encountered: