I'm close to giving up.
I'm in an investigation for about 4 hours. And I can't find what is the problem of this page.
I have this page in staging http://www-s.trueaussiebeefandlamb.com/proteins/grassfed-beef/ and this in pre-production http://www-p.trueaussiebeefandlamb.com/proteins/grassfed-beef/
In staging works fine in all browsers. In Pre, in Chrome the mouse hover of the beef not change the image. The idea is when the user mouse over the animal the cut highlighted. This works fine in IE.
In my investigation, if I change the background: url("../lamb-sprite.png"); to background: red url("../lamb-sprite.png"); in Chrome-devtools the bahaviour works.
I don't want to add any kind of Jquery to change the CSS of this page. I don't think this is the best solution.
I think the image is hidden behind some value of z-index. Try:
.protein-cut .image-map img {
display: block;
z-index: 10;
position: relative;
}
Related
I'm working with a website (Gatsby) with a sticky bar at the bottom on one page. I'm using position: sticky to stick the bar to the bottom of the screen. However, this works on all other mobile browsers but Chrome in iOS.
Scenario:
First page: This page has a list. When clicked on an item, it will open the second page in a new tab.
Second page: This is the page with the sticky bar and this opens in a new tab.
Issue: When I go to the first page, click on the item, and goes to the second page which opens in a new tab, the sticky bar gets covered from the bottom toolbar. However, if you click on the second page's link directly and visit it, the sticky bar works fine.
Has anyone of you encountered something like this before? Can this be a bug in iOS Chrome or am I doing something wrong?
Code I'm using for the sticky bar:
.floating-bar {
display: flex;
position: sticky;
align-items: center;
justify-content: space-between;
padding: 0 25px;
bottom: 0;
left: 0;
z-index: 10;
width: 100%;
box-sizing: border-box;
background: white;
border-top: 1px solid #dfe1e6;
height: 60px;
overflow: hidden;
// + some paddings based on the viewport
}
Please see the below gifs as a reference.
Visiting from the first page: https://ibb.co/6yMLLm3
Direct visit using the URL: https://ibb.co/Mp1rknm
This isn't a full answer as it doesn't have a workaround (as yet!) but I put this finding here in case it helps us get nearer the solution.
Try running these two bits of code. The first takes you the site without a `target="_blank" in the a element - i.e. it stays in the same browser tab. The second has the target attribute so opens a new tab. The first shows the sticky div correctly, the second only when the user has scrolled.
No target - works OK:
goto site
With target - doesn't work OK
goto site
(can't run it as a snippet it seems).
There is a target="_blank" in the first page code and this seems to cause Chrome IOS to malfunction.
Update: while the problem discussed in this post is not the same, it does seem people were having problems with target_blank in Chrome on IOS, including in one case removing the target_blank to get round the problem. See https://support.google.com/chrome/thread/10249317?hl=en
I am creating a new website locally and for some reason all of my images that I have on my site when you hover over them it displays a + magnifying glass instead of the normal cursor.
The links still work but not sure why the + magnifying glass is appearing. Any help on rectifying this would be greatly appreciated.
Try adding this css
img {
cursor: default;
}
Or if that doesn't work,
img {
cursor: default !important;
}
If neither works, you have something strange in your browser over-riding normal operation. If only the second one works, you have something injecting css into your page that you are unaware of.
I have really simple HTML code
<img class='star' src='' alt='★'/>
With really simple style
.star {
position: absolute;
cursor: pointer;
font-size: 40px;
color: black;
}
.star:hover {
color:red;
}
My idia is this. If there is no image on server, I show unicode star symbol ( or if user will switch off all images ). And if a user
It works perfectly in FF ( tested on FF25 ) but fails really hard on WebKit browsers. Hover state dosn't trigger or triggers ones and then stay in that state forever.
I have only one question.. WTF is that? o_O Where am I wrong, or it's just a WebKit bug?
It would be nice if someone told me how to fix this. But mostly i want to understand what is going on here.
PS: Example http://jsbin.com/UMIrAJI/3/edit
UPD:
This example is working http://jsbin.com/UMIrAJI/5/edit but the only difference is 'background' color changed on hover. As soon as we remove 'background' - hover stops working. LOL.
So my question is still valid. What is going on here?
UPD2:
I found another workaround. If we add border: 0px solid white; (but only on hover) example will also start to work http://jsbin.com/UMIrAJI/6/edit . So it's something about repainting.
UPD3:
It looks like a bug to me so I reported it. I'll wait for some comments from developers.
https://code.google.com/p/chromium/issues/detail?id=323545&thanks=323545&ts=1385479799
Instead of alt, which should describe the content of the image, for browsers without image support and for accessibility tools, use the title property
<img class='star' src='' title='★'/>
I am making a HTML/CSS and jQuery-based file manager aimed at mobile devices. Part of it involves the use of CSS=based modal dialog boxes for various file operations (copy, delete etc.).
I achieve the modal dialog behaviour like this:
<div id="overlay">
<div id="modalBoxControls">[close]</div>
<div id="modalBox">
<div id="modalBoxContent"></div>
</div>
</div>
And the CSS is:
#overlay {
position: fixed;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
background: ([semi-transparent png]);
display: none;
}
#modalBox {
width: 80%;
background-color: #fff;
margin: 0px auto;
opacity: 1;
}
I use jQuery to show and hide it by calling .fadeIn() and .fadeOut() on the overlay element.
So far so good - this works great in all the browsers on my dev machine.
However, when testing on my WP7 (Samsung Omnia 7), a rather bizarre thing happens. The modal dialog shows up fine, the page behind it is blacked out. But clicks (or taps) go through the #overlay and activate anything behind it, even though it totally covers up everything behind and it's z-index is 1000.
I also tested this with the well-known "Lightview" plugin from Nick Stakenburg (a well-tested and refined piece of code) and found the same behaviour on IE on WP7.
So it seems like this could be a bug with the browser itself.
Does anyone know any solution for this?
Edit - jsFiddle with example of problem
So, check this out in your WP7 device and see how the files can still be clicked even when there is an overlay over the top of them: http://jsfiddle.net/michaelbromley/CHU76/
If by "activate anything behind it" means input controls like text input then I had the same issue. To be honesty I don't know a good solution. My workaround was disabling input controls during popup is showed and then activating them back by removing disabled attribute. The problem seems not to be related to jqmobile, but supposed to be a general behavior.
OK, so it seems that there may be no "proper" solution to this problem (hey, 24 hours is a long time on SO!), so I have come up with my own hack solution:
I when the modal dialog box is opened, I simultaneously set the "visibility" CSS property of all the elements "behind" the overlay (i.e. links and anything else that would otherwise erroneously respond to taps/clicks) to "hidden" (by using jQuery's .css() function). This means that the page layout is not affected, and that there is now nothing there to be clicked on.
As I said, this is a bit of a hack and will not be suitable for everyone who runs into this problem. However, it works well for me.
Code in jsFiddle: http://jsfiddle.net/michaelbromley/CHU76/1/
Yes, this is clearly a bug in Window Phone 7 and it is not even fixed in Windows Phone 10.
I will report this bug to Microsoft and hopefully it will be fixed.
I'm working on my new online portfolio at http://asbjorn.org/ny/, and I've come across the weirdest issue!
Every time you open the page for the first time, the next and previous buttons for the slideshow don't appear. If I open the inspector, they pop up immediately, and they also appear when reloading the page.
They're pretty standard html elements, not added dynamically, so I have NO clue as to why this happens! Of course I can't have the site visitors reload the page just to see them. :/
I really hope someone can help me! :)
update: seems like it's a chrome only issue. For me it happens consistently in chrome on both Win7 and OSX. A few of my friends also has the same issue (probably in chrome on osx)
So I'll take a stab at an answer. When I see the problem in Chrome 22, and I bring up the inspector, I note that the #previousLink and #nextLink divs have a width of 0 in the broken state. Try setting an explicit width for these in your CSS, or make the nested image use display: block.
#previousLink { width: 31px; }
#nextLink { width: 37px; }
or
#previousLink img,
#nextLink img { display: block; }
I think the combination of these inline items and your overflow: hidden rule are biting you. I think. This is a tricky bug!