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...
Related
I have a very strange problem that I can't solve.
I have an application being created with draggable divs.
Everything was working fine so far. But since a few hours, as soon as I drop a draggable div, most of the divs on my page disappear, even though they are not related to the element at all!
As soon as I resize my page, the divs reappear. It's as if it's a display bug. Moreover, this problem only happens on Chrome. No error message is displayed though.
Does anyone have any idea what this could be?
Thanks a lot.
Google is aware if this problem and they fixed it in Chrome version 107, which is currently in Beta status. I was facing the same issue so I installed the Beta version and confirmed it is resolved. You can download the beta here:
https://www.google.com/chrome/beta/
I would also mention that this problem started with Chrome version 106, which is the latest stable version as of today.
Until Chrome is fixed, I found this workaround which fixes the problem. Add this style to the draggable element:
background-position: 0;
transform: translate(0, 0);
The fix for this is coming out soon.
https://bugs.chromium.org/p/chromium/issues/detail?id=1370030
i'm facing an issue which has been quite unknown to me.
In my example http://studio-a-h.de/kirby-test/projects/morning-has-not-dawned-yet you see a photoslider.
If you click on "Index" an overlay with the image index is about to be displayed.
In chrome and Firefox everything is fine, but Safari shows the overlay with a delay of appr. 500ms and it seems that there is an extra delay, even when the div is already visible.
Are there any known bugs with Safari and jquery? In my research i hardly found something, beside the iOS Mobile delay bug.
Would be great if someone has an idea. Maybe it is a css issue i did not find?
Best regards
Try and add a rule to adapt the browser in-advance, prior to that opacity change.
Use the will-change property like so:
.main {
will-change: opacity;
}
This will tell the browser that there is going to be some opacity changes to that div, so the browser can be ready for it before the opacity change rules are met.
Update:
It was not a jquery problem. I used hardware acceleration with translateZ(0) and this caused a super bad Safari performance on animations. Now i just have the problem that it lags like hell on scroll :(
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 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.