I have top menu in Ipad with position: fixed and width: 100% in my site, which is displayed fine, when keyboard is shown and orientation is changed (f.e., from Landscape to Portrait) in Safari IOS5, but not in IOS6.
In IOS6 after this actions top menu becomes shifted to right at 128px. I found some very close problem, related exactly to 128px in StackOverflow iOS6 Safari orientation change bug?, but solution was not applicable to my case.
So, investigating a little, I changed in javascript event "orientationchange" the CSS property of top menu position:fixed to position:relative.
And that helped, my top menu redrew correctly. But, as I needed exactly position:fixed later for my site, I added setTimeout() method, which returned CSS position back to value fixed.
$(window).bind("orientationchange", function(e){
$('#framecontentTop').css('position', 'relative');
setTimeout(function(e){
$('#framecontentTop').css('position', 'fixed');
}, 500)
});
I think, it is the temporary solution. Does somebody know real root cause of a problem, or it is IOS6 bug?
Related
I am struggling with an application using custom elements that is just not working properly in Safari. Here is a screen shot with what Safari is showing v what it is supposed to show in chrome. It was taken on a Macbook Air, although I originally discovered the issue on an iPad.
However this screen shot shows that web inspector does think there is an element there whose foreground color is white and opaque (I set those deliberate) even though nothing is displayed.
So why is Safari not displaying the elements?
For anyone else out there wondering about the same thing. I think I found the answer!
One of the surrounding elements has some css with overflow-y: auto, but without a specific height. I believe what is happening is that safari has shrunk that element to height 0, but that the inspector is still showing where the element would have been, if its not been hidden by a zero length scroll bar, scrolled so that item is below the cutoff area of the scrollable element.
I haven't yet figured out why it works in chrome, my guess is slightly different handling of overflow.
I am using the Flickity slider (from Metafizzy) in a landing page to show different products. The slider is in portrait size and not landscape.
The issue is that when the user only scrolls the top portion of the slider into the viewport on mobile (i.e. 20-30%) and they attempt to scroll/swipe the slide, the screen suddenly jumps to attempt to include the whole slider into the viewport.
This never happens on the mobile emulator on the desktop, but only on the smartphone device on safari and google chrome browsers
Is this intended to be a specific behaviour for the Flickity slider? Like I should not be using it to make portrait sliders? I've gone through the plugin options and not able to fix this behaviour. It never came up in early testing with dummy content.
I've provided a link to the github page where it is happening, you can open it up in mobile browser and see the viewport "jumping" bug when you attempt to scroll the table. https://true-digital-channel.github.io/Galaxy11-Preorder/build/mobile.html
Disable the keyboard accessibility by setting accessibility: false in the carousel options. From the Flickity issue tracker.
Sometimes in my UWP app I experience a problem while scrolling with my scrollwheel. Basically the scrollbar moves when I use my scrollwheel, but the content isn't rendered properly; resulting in an empty block which gets scrolled up and down.
Yet everything works fine when I click and hold the scrollbar instead of using the scrollwheel on my mouse.
I have to restart my UWP app in order to get things back to normal.
The issue appears while scrolling a default XAML ListView, but also in a RadDataGrid (Telerik).
I have made a screen recordingo of this issue, which hopefully will illustrate what's happening more clearly.
Click to see video
I haven't found exact steps to reproduce this issue, it just seems to be there at random from time to time.
Does anybody have an idea what might be going on here and how this could be fixed?
I've noticed some interesting behavior with an app in iOS7. The navbar normally has the following color:
On all real devices, when the app is backgrounded or opened up, the navbar is temporarily covered with a black almost gradient mask that looks like this:
In the simulator, when the app is open and is backgrounded, I get the same black mask over it but the black is slightly shorter from top to bottom, but when it is opened up again I get the following weird white streak:
This is all temporary, and once the app finishes launching it goes away. Does anyone know what would cause this to happen?
I finally tracked down the issue to the following code in a table view controller I had:
if( IS_OS_7_OR_LATER ){
self.edgesForExtendedLayout = UIRectEdgeNone;
self.extendedLayoutIncludesOpaqueBars = YES;
}
The weird thing is, I've used this a million times to make the tableView properly sit under the navigation bar rather than just under it, so normally without this code it doesn't work right on iOS7 - but for some reason it does now. I'll have to look more into that... For some reason removing it from all my tableviews fixes the problem, but removing it from my regular view controllers fixes the navbar color problem, but makes the view's sit under the nav bar again.
I solved this issue by making sure I checked "Under Top Bars" in storyboard on the View Controller's attributes.
I'm having some issues with a website that only occur in Safari. I'm running version 5.1.7 (7534.57.2) on a Mac.
You can view the site here: http://mcad.edu/annual-report-2011-12/.
The website is parallax scrolling, with a relative positioned content div that holds everything, including the 3 parallax scrolling backgrounds which are all fixed, top and left set to 0.
Within the fixed parallax background containers, colorized images fade into full color images when a user mouses over them. For each "image", there are two divs stacked, each with background images that are positioned by background-position. The div on the bottom has the colorized image. The div on top has the full color image as a background and has its opacity set to 0 until mouseover. The fade is achieved using a CSS transition on the opacity property so that the top div becomes visible.
So, in Safari only, when I mouse over any of these divs, the transition occurs smoothly but all of the content in the same parallax scrolling background div shifts/jumps in the process. If I remove the CSS transition, this does not occur.
I think that it might have something to do with the transition/webkit-transition property not playing nicely with a fixed position container in Safari. However, all of the issues I've found that relate to that are from 2010 and mention a Safari bug that I assume has been fixed…two years later. But maybe not.
There's also another issue with the Catalyst section (3rd dot down on the right navigation). These animated images work as links in Chrome, Firefox and Opera, but not Safari. Any ideas?
I have a similar issue with a fixed position and transition-duration for a header menu I've created. When a visitor scrolls down, the menu has a box shadow that fades into place. Well when this is viewed on safari in a MacOS, I get a weird sliding in issue. To easily fix this, after spending way to much time searching for answers, I'm removing the transition effect for macs. This fixes the slide in issue but gets rid of the transition effect sadly.
So as you were speculating, it probably is the transition duration on your project as well. The best thing for this would probably be to make a Mac-Safari CSS file, get rid of the transition-duration for that particular area and move on with your project.
Best I can suggest for now. Hope it helps.