search

rodneyrehm / viewport-units-buggyfill

Making viewport units (vh|vw|vmin|vmax) work properly in Mobile Safari.
MIT License
1.59k stars 151 forks source link

translateX with vmin not working correctly in IE10 #73

Open embpdaniel opened 7 years ago

embpdaniel commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

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:

screen shot 2016-11-26 at 10 30 52 am copy

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 commented 7 years ago

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

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)';