First off, please excuse my English as it is not my first language.
I have encountered a very weird issue in an online store I am working on. It only happens in Chrome and I simply couldn't figure out what's going on and it's driving me crazy :(
This is the website I am talking about:
heavenlynature.co.nz
To replicate the issue (please bear with me), you need to add a couple of individual items to the shopping cart (at least 2 different items, then click the shopping cart icon (heavenlynature.co.nz/cart), shrink the browser viewport just below the first line of item, like the image below:
http://francisthedesigner.co.nz/images/test/2.png
Then drag the scroll bar downwards, you will find a block of div blocking over the top of the text/image (please try refreshing until the issue appears as sometimes it appears to be loading correctly), like the image below:
http://francisthedesigner.co.nz/images/test/3.png
But as soon as you highlight the page or hover over the div it just disappears. Now this only happens in Chrome and Firefox doesn't seem to replicate this issue.
It seems to happen only in the checkout screens, really losing it trying to make this work, any help will be greatly appreciated :)
Unfortunately even after following your instructions i couldn't replicate your issue. Can you please try to go on your Chrome under Tools/Extensions and disable them all?
Can you also try to replicate this issue from an other computer?
Related
This page here: https://www.ohdela.com/
Has a slider at the top of the webpage. If you use chrome tools or you mobile phone and try to click the buttons in each slide - they do not work (give it a second to load completely). This issue only occurs on smaller screen widths. I cannot figure out why. There is nothing on top of them blocking them from being clicked.
The only thing I can think of is that there is javascript somewhere preventing the default action from taking place. Any ideas as to why would be appreciated!
Thanks for looking!
I'm experiencing a very weird chrome (45 and 46 windows only) behaviour with css3 transition using fullpage.js
The transition "freeze" 80% of the time when I'm going from the first to the second section of a website. And then, everything work fine.
Take a look by yourself :
first you will need to login as the website is still under construction.
Http://www.evandorlot.com/wp-login
Login : Guest
Pass: Luckyone
then, come back to the home page www.evandorlot.com
Sroll down, here's the bug. From the first to the second slide of the website, the transitions "freeze" they pop instantly to their final stage.
After pressing ctrl+f5 and trying again, sometime it work, sometime no... it seams to be a chrome bug as it work 20% of the time. But I would like to fix it somehow. For this I need to know what cause the issue.
I'm working on this bug for more than a week now and don't find any solutions:
I tried to disable all the TweenMax animations, then all the css3 animations that are not vital. I also disabled all my custom javascript expet fullpage.js function without any configuration, I tried removing the image from the second slide, deleting the second slide, swapping the second slide with another, replacing the image, the text, deleting the diamond icon, deleting the menu on the bottom right corner, actiavating GPU acceleration by adding CSS3 translateZ to each elements that is animated on the first and second slide... Nothing fixed the bug.
The only way to make it working properly is to empty ALL the content from the second slide and leave the entire section empty. So I guess something cause the issue, but I really don't know what.
I know it's a long shot but if anyone has already experienced similar bug or has a suggestion to fix it. It will be very useful as I'm totally desperate :)
I've been working on a personal website for a class project. I've come across some bugs in it that I can't seem to get fixed. You can find the website at bnb.im or at CodePen (the codepen is mostly copy and paste; I did the best I could with it).
So, the first problem is the white space to the right of the screen. I can't tell what's causing it--when I use the Select element feature on FF, it just selects <html>. I asked on another site, and someone said that it was caused by the animation of the portfolio items sliding in--I tried the fix they suggested, adding overflow: hidden; to body, but it didn't work (the page became unscrollable). I also tried making the portfolio items smaller (45% instead of 50%), but that didn't help, either. Any ideas?
The second problem is with the portfolio items and/or the social section. Whenever I try to add margin-top or margin-bottom to put some white space between the last portfolio item and the social section, nothing happens for the most part. The only time I've gotten it to work is when I put the margin-top on the social section to 200%, but it was too much so that won't work. Any ideas with this one?
Thanks a lot--I really appreciate you taking the time to read through this and (hopefully!) look at my site.
The first problem looks fixed to me? Did you figure it out?
The second one take off height:100%;from .portfolio
I updated my site to wordpress 3.8 and along with that came a weird jump when filtering the portfolio. inspecting this with chrome, it is very hard to see what exactly is going on. margins, padding, etc. are not being changed nor are elements being inserted. Other than this the effect/transition functions fine, and display correctly before and after the transition.
you can visit the page here to see the effect.FYI I already took a look at this link and this isn't the issue.
Thank you in advance.
EDIT:
This only seems to be happening in Chrome
just add overflow:hidden to li
Me and the team have been a bit stumped on this so I'm hoping someone has come across this problem before.
I have a notification div that flies in depending on some event calls. The script I have seems to be working everywhere except one application where the images won't load. Both the icon css background image and the actual loading indicator won't show if the container is dynamically appended.
If i remove the initial display:none property the images load, but once the trigger is called they don't.
Unfortunately the application is on an internal network and I can't share a link, but I've included a screen shot and a jsfiddle to the code I'm using. (which in it's self is doing exactly what it's supposed to)
http://jsfiddle.net/FSshV/7/
It's a heavy js based app with some ASP.NET 2.0 here and there and some ajax calls bouncing around but doesn't seem to be giving any errors and i haven't been able to pinpoint the problem.
I know it's a long shot and not much to go on but maybe someone hit that wall before :)
I'm curious if anyone has seen a similar problem before and can share some insight?
PS: yes I've checked if the image paths are correct, and they are ^.^