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.
Related
I use the Simple Utility Function from this Answer to detect if a element is in my viewport. If it is, an fade-in animation is started for my content.
It works fine on Windows, macOS, Android and every browser on iOS except for Safari. In Safari the content stays hidden and the animation only starts after I try to zoom out of my site. I tested this on iOS 10 and 11 Beta 5.
My solution to this problem would be detecting if the user uses Safari on iOS and don't animate my content. But i would like to fix this problem so that the animation works. Can anyone help me with this?
EDIT: I think the issue is caused by Semantic-ui.Tested it with plain html and javascript and it works. I try to fix it now.
I finnaly found a solution.
The issue was the sidebar from Semantic UI. I found a CSS snipped on the docs. I altered the code a little bit and added it to my css file.
html.ios {
overflow-x: hidden;
-webkit-overflow-scrolling: auto !important;
}
html.ios,
html.ios body {
height: initial !important;
}
Seems like -webkit-overflow-scrolling caused the problem. But i had to add the other lines of code too or else it stutters when i scroll.
Like this, everything works perfectly!
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.
My situation is extremely confusing, and I haven't the slightest clue what's going on. I made a Firefox add-on to redesign a website using jQuery and CSS. When I tried to migrate the addon to Chrome (that part was simple, because the features I am using in each SDK are very similar), everything worked except one of the main design elements:
I have a menu with position: fixed; aligned to the left of the page, and margin-left: 150px; on the main container element. The problem is that the margin is completely disappearing when I open it in Chrome. It works fine in Firefox.
So then I copied all of the HTML, CSS, and JavaScript into a jsFiddle, and the margin worked fine. Everything was completely identical, so I can't figure out why it would work in jsFiddle but not on the website.
Using left: 150px works, but then the page spills 150px to the right, and those dreaded horizontal scrollbars appear.
Links:
Extension File (CRX): https://docs.google.com/open?id=0B3k3BjZD2YfiTWNzTlhsa0t5STg
Demo Website: http://demo.flvs.net (Username: demo, Password: demo)
jsFiddle (Some images don't load, but the code is identical): http://jsfiddle.net/CjSXA/
I just removed the margin-left from #page_cont and added it to #content-cont.
That made the content stop hiding under the menu, though the footer is still partially covered by it.
I have a website with a superfish menu and I have two different plugins for slideshows, nivo slider in the main page: http://hermandaddelcalvario.org/wordpress/ and photospace in the gallery page: http://hermandaddelcalvario.org/wordpress/imagenes-3/
The problem comes with IE7, the dropdown falls behind the images on both pages. I searched a lot and everyone suggests that I do this:
/*gallery container*/
#content{
position:relative;
z-index: 1;
}
/*superfish container*/
#navwrap{
position:relative;
z-index: 2;
}
I did so but to no avail, is there something else I missed?
The issue occurs in both IE 6 and 7 due to the way they create a stacking order. More details can be found here: http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
In short - within your conditional IE stylesheets you will need to give your menus parent a z-index of higher value than your slideshow.
Ok this is a bit lame, 3 secs after I asked the question I found my answer here: Jquery Superfish problem in IE7
Using that script now it works but I still want to know what's wrong with the css here, I'd go for a css solution before this but I wanted to state that would solve the issue.
I have two problems... I've tried altering my CSS file, the JavaScript files and all kinds of other things. A google search yielded no remedy to these problems, so I come to the awesome site of answers!
This page -> http://students.cmps.subr.edu/aaron.chauvin/misc/test2.html
has some issues in Chrome and Safari. Only when my CSS is in effect, the pictures that are supposed to be side-by-side aren't, but when the CSS is off, they are. This problem isn't evident in FF/IE9. I'm thinking it has something to do with the but I'm not totally sure. Edit Edit: Thanks for the fix Genzer!
Also on that page, even if all my CSS/JavaScript isn't linked, I have a small gap between the bottom of the images that are links and the dotted link border... I want to get rid of the gap. What's causing this gap? This happens in all browsers.
Thanks in advance.
Edit: Here's the CSS: http://students.cmps.subr.edu/aaron.chauvin/misc/style.css
Edit Edit: Fixed the side-by-side image link problem, now trying to figure out what's causing the variation in the display of the custom a:focus border (non-existent in IE9, partially encases image link in Webkit browsers) and the gap between it and the bottom of the image link (all browsers BUT IE9).
The problem is you're wrapping all your column's info in a span: <span class="reg">...</span>
IE9 and FF figure out that you want it to display as a block element, but Webkit (Chrome and Safari) don't. Set display:block on the "reg" class and you should be set. (I think this fixes the "dotted border" issue as well, but i'm not quite sure what you meant there)
To get the orange border to show up in IE9, make sure to set outline-style to something like "solid" or "double" in the a.piclink:hover css class, in style.css. Once i did that, the border shows up.
I'm still not entirely sure why your links and nested images are behaving like they are, but I found a little tweak (tweak = almost a hack) to get it to work: Set display:inline-block; on a.piclink and set a fixed height on it. Note that inline-block tacks on 4px, so the height should be 4px taller than the height of the image; in your case: 47px. It's a bit of a hack, but it's valid and it works. Unfortunately IE7 doesn't like this, but zoom:1; *display:inline; get it working.
Adding following CSS code in your style will make Chrome display your TestPage the same as IE8.
span.reg a {
display: inline;
}