I was making various buttons to try them out, and I came across a odd bug. When I move the mouse, it seems like there is a 'chance' that the first letter of the word in the first box will move to the side very slightly. I think (but am not sure) that the bug only happened when I put the text in the center of the div.
Here is a jsfiddle example:
jsfiddle
And here is a video of what is happening:
youtube
Related
RighteousAlliance.com - two buttons on the right with mouseover effects. (i'll fix their actual position later)
If you adjust the browser width by dragging it you notice how they stay in the same position relative to the background? That's what I want.
But there's something invisible outside the images that are overlapping and ruining the mouseover effect. If you hover vertically over "shop" you notice how it only lights up ABOVE the top part of "Learn" to the right?
What is blocking that?? There's something invisible outside the div. I've tried for 3 days to figure this out.
I can fix that problem by adding "display: inline-block" and something else. BUT THEN IT BREAKS THE ALIGNMENT WITH THE BACKGROUND when you adjust the browser size horizontally. How do I get BOTH to work? Please help. I did it a long time ago but can't figure it out.
Here's a screenshot of the code: https://righteousalliance.com/Images/code.png
This is one that absolutely confounds me. I have a site that uses a full-screen "splash screen", which the user then slides away to reveal the content beneath. In Chrome and Firefox, everything displays properly, but on Safari (both mobile and desktop), the div is split down the middle, the left half of the div is transparent (showing through to the content beneath) and only the right half is visible. All the content within it is still positioned as if it were full-screen, but it's all abruptly cut off halfway cross the screen, right down the middle of an image and a block of text. After several days rifling through the inspector I can't find any reason why Safari would be exhibiting this truly bizarre behavior—the split doesn't seem to follow any existing borders or boundaries of any elements, the inspector is acting as if the entire div is visible.
The only thing I can think of is: This issue seems to have appeared around the same time as I introduced some schmancy transform3d effects on the body, is Safari known for being unable to properly handle transform3d effects?
Since I have no idea which section of code could be causing this glitch, I'm not sure what code I would paste here, but the website is http://vanderstank.church. I apologize again for the broadness of this question, but I am unable to narrow it down any further. Thanks for any light you may be able to shed on this situation.
Solved this myself - it was related to the 3D rotation I added. Turns out I had applied the rotateY(6deg) effect not only to body but also to the #front div. I couldn't get that #front rotation to actually work right, so I'd given up on it... but forgotten to delete the line.
But because #front had a rotateY(6deg) on it while on the same plane/axis as body, it rendered as if the right half of it was "in front of" the body but the left half was "behind" the body. Still not sure why this only happened in Safari.
Remember to delete or comment out old code, guys!
I dont know what the technical term for this is but I decided to use the term "Ghost Marks" to describe it. This is done using Chrome.
Using Bootstrap I have two tabs. There is more content in the first tab so the container is longer than the second tab. Outside (below) the tabs container there is another div with some text and a green button.
Sometimes when I click between the two tabs "Ghost Marks" of the div outside the container are left on the page. This is occurring because when I switch from the larger tab to the smaller tab the div outside the container moves up the page leaving marks as it goes along.
Here is an example of what it looks like:
It has something to do with the way chrome paints the HTML. If I press F12 the Ghost marks disappear.
I could make the 2nd tabs container the same height as the first tabs container but that would leave a lot of white space.
Any ideas how to make sure this doesn't happen?
Is it possible to load up 10 images (same dimension), stack them on top of one another only showing 1 image at a time and then by holding down the left mouse button and dragging the mouse up you scroll in one direction and moving the mouse down scrolls in the opposite direction?'
if so how can this be done? canvas element would be the begining, no?
This sounds like a job for... Javascript!
This solution isn't perfect, but it's an example of mouse scrolling images: https://github.com/kamranayub/Just-Another-Carousel
Today i found this site, "3D Meninas", with a nice effect of 3D animation. When I look at the HTML code, it seems that there is no <script> or event, so I guess it only works with CSS. I'm not a CSS guru, can someone tell me how it works ?
Thanks
It works by dividing the picture up vertically into single pixels and having a css hover pseudo-class for each one. There are 505 mentions of the word hover. If you are looking at the source in a viewer that doesn't wrap lines, note that the lines at the bottom are extremely long (scroll to the right).
The image is divided into about a hundred vertical "slices". When hovering over each slice, each image is placed in a precise and hard-coded fashion.
The feature with most depth, the right-hand wall, is simply squished and stretched by changing its width attribute.
Edit:
Here's the official explanation by the creator.