I have a page which has a listview autodivider linkbar, which list alphabetical characters and help user to navigate through a listview, here's the code and example:
http://view.jquerymobile.com/master/demos/listview-autodividers-linkbar/
My problem is, that in mobile devices, the position: fixed does not work, so jQuery implement some tricks in order to make it fixed. Everything works finem but in Chrome it simple doesn't work.
I investigate, and the problem is from the wrapper (ui-panel-content-wrap i think):
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0,0,0);
If I put
-webkit-backface-visibility: visible;
-webkit-transform: none;
The position: fixed in Chrome start working, but the menu panel, anyone, the left or right one stop working, because the transform property to open and close is now disabled.
Any idea how to make both work?
I'm driving MYSELF crazy trying to fix it.
Related
To see the problem clearly. Please take a look on the following YouTube video.
Position fixed elements jump around when redirecting iframe
or try the widget on this site (iPad)
Naiise
Note: The site in video is different from the site above since the
owner doesn't wanna use the widget anymore before the problem is
fixed. But they are having the same problem.
One more thing: All fixed elements on the parent site jump around not only the iFrame. It likes, on iPad, the fixed elements need to be recalculated position when redirecting pages inside an iFrame.
Here is a simple code that I created to simulate the issue. Please create a html file from it and run it on iPad simulator or real device to see the problem.
<html>
<body style="height: 10000px">
<div style="color: #ffffff; width: 200px; height: 100px; background: red; position: fixed; left: 20px; bottom:300px;">
Other fixed element
</div>
<iframe style="height: 500px; width: 420px; position: fixed; bottom: 95px; right: 20px;" src="https://printskitchen.eber.co" />
</body>
</html>
The problem is caused by the translate3d transformation that you apply on the iframe;
-webkit-transform: translate3d(0, 0, 0);
There is a well known problem in which translate3d causes position:fixed elements to behave like position:absolute in certain webkit browsers, such as those on iOS, as well as certain desktop versions of chrome.
Here is a demo which demonstrates the bug in action:
html,
body {
width:100%;
height:100%;
margin:0;
padding:0;
transform: translate3d(0, 0, 0);
}
#nav{
width:100%;
height:10%;
position:fixed;
top:0;
left:0;
background-color:red;
}
#content {
width:100%;
height:500%;
}
<!DOCTYPE html>
<html>
<body>
<nav id="nav">
</nav>
<main id="content">
</main>
</body>
</html>
In the demo, the red nav should be visible even after scrolling down. Depending on your browser, this may or may not work properly as is. Removing the problematic -webkit-transform: translate3d(0, 0, 0); style makes it work properly across all browsers.
This bug occurs due to the transform creating a new coordinate system, causing the position:fixed element to become affixed to the transformed element instead of the viewport.
I myself came across this bug while trying to smooth out transitions on iOS, and created a post about it here. More information can be found on this thread which I have also linked to in my own post.
The only surefire fix I know of is to remove the problematic translate3d style. If it is necessary, for example in order to coax iOS into enabling hardware acceleration (which is what I needed it for), then try applying it to different elements, either parents (body, html), or children of the iframe holder. I found that applying it to a completely unrelated element gave me the desired result.
There are also several case-specific workarounds and fixes in the thread I have linked to. One of those might do the trick.
It is a pretty nasty bug to track down. Took me a while to find it on my own page.
Best of luck.
I figured out that if you change the position from fixed to absolute it'll work perfectly.
You can follow the following tutorial to emulate the fixed position by abosolute position
https://gabrieleromanato.name/jquery-emulate-css-fixed-positioning-on-mobile-browsers
Try to avoid changing height and display property (you should remove opacity as well). Instead, give #iframe-holder will-change: transform; and try to:
transform: translateX(150%); when widget should be collapsed.
It should not cause widget to render again (the problem might be rendering issue), and you will benefit in performance.
I'm stumped. I use Masonry on my Wordpress site, and it looks fine on all major browsers except for Safari.
Here is an article link, for example:
masonry article about apple watch on a wordpress site
On Safari the div items are all squashed up, and I have no idea why.
I've deactivated all plugins, made no difference
I've tried using position:absolute; inside the div item, but then the blocks overlapped
I've tried vertical-align:top; inside the div item, made no difference
Any help would be appreciate. Really stumped on this one...THANKS!
As #dcardoso mentioned, your item class with the backface-visibility style is causing the issue. It seems that adding a transform forces safari to correctly render the item.
-webkit-transform: translate3d(0,0,0);
This style: -webkit-backface-visibility: hidden; in your .item class is causing the issue in safari.
I have a Joomla 3 site at http://www.getdripped.com/dev which I am building a mobile menu for. I have it working well on desktops, but when I try to view it on my iPhone the menu slides in but is invisible. I can still blindly tap and the links do work, but its completely invisible. What's even weirder, when I click the button again to close the menu, it suddenly shows up for a brief second before the drawer closes. I'm not sure what the problem is, can anyone help?
My iPhone is running iOS 8.2, and I previewed in Safari. When I preview in the iPhone Chrome app, everything works swimmingly. Very confused here...
Your issue is very similar to other issues seen in iOS 8. A variation of the -webkit-transform hack seems to solve this problem as well.
Adding -webkit-transform: translateZ(0); to the body.open selector seems to solve the issue.
body.open {
-webkit-transform: translateZ(0);
}
iOS 8 appears to have some layering issues which 3D transforms are able to counteract. This one appears to be related to the use of -webkit-overflow-scrolling: touch; as the OP discovered.
Add this to the list of weird bugs in iOS 8.
I have this really annoying issue with the form jumping up and down on inputting values. I am using Jquery mobile version 1.0.1 using phonegap and testing it out on android 2.3 (this issue is only on android and not on iphones -why!?) .
I noticed that if the page is not scrolled before focussing on input box, then there is no issue. But the moment I scroll the page, and click on text box to input value , all hell breaks loose. Can anyone please enlighten me what is going on! Thanks in advance
I solved my issue as follows:
The container div have following css:
-webkit-transition-property: -webkit-transform;
-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);
-webkit-transition-duration: 0;
-webkit-transform: translate3d(0, 0, 0);
Removing it solved my problem in android.
It seems android is buggy with advanced css3 styles.
Hope this information may help...
Hey guys please check this page.
Please visit the page using any browser except IE. Click the 4th bullet. And then click "the hogc story" link. You can see one popup slider.
Now visit the page using IE. popup slider not working there. It only shows black screen. What is wrong in my code?. Here is my code Thanks.
Special thanks to Jawad for the screenshot.
This is what he found out in my code.
In IE9 on Windows 7, In your code under
<div class="slider nivoSlider>
the images are getting inline styles of
display: none;
So can anyone tell me how to fix this problem.? I have no idea which javascript causing this problem in IE. Its working fine in all other browsers.
Thanks
I fixed it by myself. The slider what i'm using is nivoslider. Height need to defined there to make it work in IE.This is what i applied in my code.
.slider { position:relative;
width: 1280px;
height: 412px;
background: url(../images/loading.gif) no-repeat 50% 50%; }