mroberts1313
commented
7 years ago OK, I've tested it on a samsung phone and the issue wasn't there. So far it's just an iPhone thing. But I think it's still related to the plugin because I haven't seen this behavior on any of our sites before (or with sliders using jquery.cycle2). You can see the site here: rangematepro.com "Scroll down to the Everyone is raving about Range Mate PRO!" near the bottom - that's the slider where I'm seeing the text that won't shrink back down properly when switching from landscape to portrait.
[ paste your jsfiddle link here ]use this jsfiddle to reproduce your bug: http://jsfiddle.net/simeydotme/fmo50w7n/ we will likely close your issue without it.
====================================================================
Steps to reproduce the problem
I have a slider with a couple paragraphs in each slide. On my iphone(6, but I've also seen the issue on a 5), starting in portrait orientation, everything looks good. Switch to landscape, everything gets a little bigger and fills the page properly - still looks good. Switch back to portrait and some things go back down to the right, original size, and some text stays bigger. Nothing special about the styles on the paragraphs (though I do like using vw for my font sizes on mobile so the layout stays proportional). Any idea why some text doesn't return to it's original size? If you try this in the chrome emulator, you won't see the issue. It's gotta be on the phone. I haven't tried it on other brands.
Fwiw, I added some js right below the slick setup code for the slider that I found around here, but it hasn't helped: //an attempt to fix iPhone not changing to the text to a smaller size when switching from landscape to portrait function resizeWidthOnly(a, b) { var c = [window.innerWidth]; return onresize = function () { var d = window.innerWidth, e = c.length; c.push(d); if (c[e] !== c[e - 1]) { clearTimeout(b); b = setTimeout(a, 250); } }, a; } /fix slick slider snap back on resize/ resizeWidthOnly(function () { var windowWidth = $(window).width(); if (windowWidth < 450) { $(".home3slideshow > .slick-list > .slick-track").css("transform", "translate3d(0px, 0px, 0px)"); $(".home3slideshow p.p1").css("font-size", "4vw"); } });
====================================================================
What is the expected behaviour?
...
====================================================================
What is observed behaviour?
...
====================================================================
More Details