translateX with vmin not working correctly in IE10 #73

embpdaniel · 2016-11-25T19:27:12Z

Hi, I am using the buggyfill on an angular app, using ng-class to add/remove two classes. I am shifting the position of the image of a map (when the user opens a details panel) based on vmin like so:

.region__map--open {
  transform: translateX(-50vmin);
  transition: .5s;
  /* hack to engage viewport-units-buggyfill */
  content: 'viewport-units-buggyfill; transform: translateX(-50vmin); -ms-transform: translateX(-50vmin);';
}

And when closing the details panel, I translate back to 0 like so:

.region__map--closed {
  transform: translateX(0);
  -ms-transform: translateX(0);
  transition: .5s;
}

Working great in chrome, IE9 and IE11, however in IE10, when I open the panel the map barely moves when it translates, as if the vmin value is not being calculated properly. When I close the panel and the 'region__map--closed' class takes effect, the map suddenly snaps to where it should have been while open, then slides closed to the proper closed place.

Is this a bug with the buggyfill? :/

rodneyrehm · 2016-11-26T10:16:01Z

Is there a live sample we can look at? What's the value of 50vmin in pixel in your context?

var vh = window.innerHeight;
var vw = window.innerWidth;
var vmin = Math.min(vw, vh);
console.log("50vmin is", vmin * 0.5, "in pixels");

Does that value correspond with whatever you see in your element's styles?

embpdaniel · 2016-11-26T16:31:51Z

Hi Rodney, I am not sure the console log value corresponds with the element style value because if I check the style value in IE10 all I see is that it say "-50vmin", as shown in the screenshot below:

I have created a stripped-down version of the map here so you can review. To get the spot I am talking about first click on the Florida marker in the US map then click on the Key West marker in the FL map. This will open the details panel and should slide the map to the left.

Some of the other maps benefit a lot from use of vmin. At the end of the day maybe I will or maybe I won't use vmin, but anyway if it helps you find a bug I am happy to help :)

rodneyrehm · 2016-11-26T17:16:46Z

I have created a stripped-down version of the map here so you can review.

I don't see a map in Chrome and Firefox.
I don't see the buggyfill in action here. normally there should be a <style id="patched-viewport"> in the <head>.

This will open the details panel and should slide the map to the left.

yeah, that's not happening.

I am not sure the console log value corresponds with the element style value because if I check the style value in IE10 all I see is that it say "-50vmin"

var frame = window.frames[0];
var container = frame.document.querySelector('.region__map.region__map--open'); 
var styles = frame.getComputedStyle(container, null);
console.log("current transform", styles.getPropertyValue('transform'));

You should note that the window and the frame don't have the same height. The buggyfill needs to be run in the frame's document, as that's the content you're trying to fix.

console.log("window.innerHeight", window.innerHeight);
console.log("frame.innerHeight", frame.innerHeight);

// apply -50vmin directly
container.style.transform = 'translateX(' + Math.floor(Math.min(window.innerHeight, window.innerWidth) * -0.5) + 'px)';

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

translateX with vmin not working correctly in IE10 #73

translateX with vmin not working correctly in IE10 #73

embpdaniel commented Nov 25, 2016 •

edited by rodneyrehm

Loading

rodneyrehm commented Nov 26, 2016

embpdaniel commented Nov 26, 2016

rodneyrehm commented Nov 26, 2016 •

edited

Loading

translateX with vmin not working correctly in IE10 #73

translateX with vmin not working correctly in IE10 #73

Comments

embpdaniel commented Nov 25, 2016 • edited by rodneyrehm Loading

rodneyrehm commented Nov 26, 2016

embpdaniel commented Nov 26, 2016

rodneyrehm commented Nov 26, 2016 • edited Loading

embpdaniel commented Nov 25, 2016 •

edited by rodneyrehm

Loading

rodneyrehm commented Nov 26, 2016 •

edited

Loading