Check this page in Chrome (Mac).
http://lindesvard.se/varumarkesutveckling/
1) Page top has five icon buttons with CSS animated hover effect.
2) Page bottom has a contact form.
3) When NOT hovering icon buttons, contact form checkboxes render perfect.
4) But AFTER hovering any icon button, contact form checkboxes collapses.
When searching for Chrome CSS animation bugs, there is a lot of suggestions on using translateZ(0). So I wrote CSS
-webkit-transform: translateZ(0) scale(1.1)
but the bug is still there. All works fine in Safari. Does anyone have any clues on what happens here?
Related
I found a really strange behavior when using a Materialize CSS modal in Firefox (66.0.1). It works fine in Chrome (73.0.3683.86) and MS Edge (where do you find the version?). I'm using Windows 10. It does this with the modal demo in the official Materialize CSS website as well.
The problem seems to start if you display a modal with enough content so that it displays a vertical scrollbar. It needs to have links or buttons to see the problem I will describe. You can simulate this by resizing Firefox so that its vertical height is small enough to make the scrollbar appear. Now close the modal. Then resize the height of Firefox so that the modal will appear without scrollbars. Open the modal and hover over a link or button and any hover effect that should happen, does not. Click once on any link or button and nothing happens. Click a second time and it works properly.
And even odder, after opening the first modal with a scrollbar, you can open the second without a scrollbar and do nothing for about 15 seconds and then the links or buttons will work fine.
When this happened, I tried right-clicking on the button to "inspect the element" in the Firefox Inspector. Instead of getting the button, I got the modal overlay element behind it. Note that when this happens, the overlay is not above the button or any of the modal content. It's not a z-index problem. To see whether it was a problem with the overlay, I added an onOpenEnd() function to the modal options that would remove the overlay as soon as the modal opened. I had the same problem. When I tried again to open it in the inspector, I got whatever was behind the button. So it's almost like the modal isn't even there until I click on the modal first or wait for 15 seconds.
I then tried to add some code to the onOpenEnd() function that would give focus to the button, but no effect with that. I tried tabbing to the button, but that didn't work either.
Just before submitting this I found another piece of the puzzle. As I said, hovering over the buttons when this is happening will not show the usual hover pointer. But if I hover above and a bit to the left of the buttons, the cursor does change. When I click there, the color of the buttons does change like it's been clicked, but the action (closing the modal) does not happen. Hmmmmm....
If you want to test this out, go to the Materialize CSS webisite and open the page for modals. (https://materializecss.com/modals.html) Reduce the vertical size of Firefox so that when you open the demo modal it has a vertical scrollbar. Now close the modal. Resize Firefox back to normal vertical height and open the modal again. Hover over the Agree or Disagree buttons and you won't get the pointer cursor. Try click once and nothing happens. Click again and the modal will close. Or wait the 15 seconds and then the buttons work.
Most of my users will have the modal open for more than 15 seconds so it's not a big problem. But sometimes they will open it just to check something and then want to close it. Sure they can click twice, but I'd rather it work properly. Chrome and Edge work fine. Firefox doesn't. Can anyone think of what is causing this and whether there is anything I can do in my code to make it work properly? Thanks.
I can't click on some of the links and text boxes in the #header of my website in IE8 (works otherwise fine in modern browsers)
See: http://www.ekgquiz.dk
I have tried those solutions without any success.
Sometimes i can click the links during loading time.
In IE only text part of link is clickable
Link is clickable sometimes on page load, other times not clickable
IE8 - navigation links not working
Thanks in advance for your help!
Antoine
My wife's blog (Japanese) has an issue with the styling of the comment form.
It looks fine on Windows Firefox and other browsers when you hover over the submit button (dark red) at the bottom. On Firefox for Macs, the hover effect is like 1/2 of the button gets the correct coloring while the bottom half. It looks fine in Mac Safari. Do I have some of my color properties wrong?
http://www.miwacle.com/?p=20246
try looking in here
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
this will give you the list of specific css for firefox.
hope this helps.
Opera is the only browser I've tested that doesn't recognize the links on my home page. I can click on a few of the images and go to the linked page, but most don't do anything when I click. The cursor even remains an arrow. Works in every other browser.
http://test.davewhitley.com/not-wp/mobile_test/
They are images wrapped in anchor tags and the grid is created with css columns.
Any ideas?
Update:
The same links that are not clickable also aren't inspect-able in opera's web inspector.
Update:
Please note that some of the images are click-able on the left hand side. Which images are click-able varies with the browser width. If you view the website > 1300px browser width then most of the images are not click-able on the right side.
This seems to be a known bug in Opera 11.6x which is fixed in the most recent previews of Opera 12. I don't know of any workaround right now, but given that a fix is coming in the not too distant future I would simply wait for it.
So I was testing out the 960gs when I encountered a problem with the Opera & IE8 browser.
Below is an image with the page rendered in Opera (But same error happens in IE8.)
I don't care about the buttons not being styled correctly, but it's the divs aligning horizontally that bugs me.
Below is the same page rendered with chrome (looks the same in firefox).
Anyone knows what the problem might be?
Your HTML has incorrect tags. buttons cannot have hrefs. Only links (a tags) can.
Your CSS does not have gradients for Opera, IE only for Safari/Chrome.You would do that using -o-linear-gradient(top, #ade2ff, #0588fa);
Well, either you use <button> or <a>. If you start your buttons with <button> you can't end them with <a>. Just choose one of them and your grid layout works.