I am creating a slider with custom "prev/next" navigation-arrows.
All the animations works fine. I use the transform: scale() to scale up the arrows when hovering and it all works fine. I just have one problem..
I want to prevent the arrow images to scale too.
I think I have tried everything: I've used somekind of :before/:after (see below) and it worked pretty good. But not in Safari (No transition when hover).
http://jsfiddle.net/XF4Qj/5/
Then I tried something else: Putting a span inside the arrow container, and when the arrow container was scaled up, the span was scaled down, but it didn't looked good at all (See below).
http://jsfiddle.net/Ajngc/1/
I have tried for hours, but I cannot get it to work in all major browsers.
So the question is: How to I prevent the arrow-images from scaling too, and just preserve their original dimensions?
It's only the white circle that schould be scaled up, and not the background image.
I've created a third fiddle, which has all the working code from my slider-arrow-functions:
http://jsfiddle.net/Ajngc/2/
Could be really great if someone could help me with this.
Thank you very much
- Jesper
Instead of transform()ing those elements, why not just change the size? See this updated fiddle.
.arrow:hover {
width: 50px;
height: 50px;
top: -5px;
bottom: -5px;
}
.prev:hover {
left: 35px;
}
.next:hover {
right: 35px;
}
Related
In my p5.js code, original code here, I want the canvas to be aligned with the top left of the screen. However, the canvas does not seem to want to co-operate, and it looks like there is a padding on the top of the canvas.
When the display class in CSS is set to block (the default), the canvas appears to have a padding on the top, however you cannot change this using CSS. All I want is for the canvas to be aligned to the top left.
I have tried manipulating CSS, using padding-top, padding, block: inline, and overflow: hidden, but they have not worked, however, block: inline seems to change the canvas so the padding is on the left instead of the top.
Simply, I try to do this in my sketch:
function setup() {
createCanvas(900, 600);
}
function draw() {
draw_my_stuff_here();
}
However this code works normally, however, it seems the stuff in draw_my_stuff_here(); something causes this problem happens.
A simpler version, found here, is a very similar setup, but actually works. The difference is it doesn't use the SceneManager.
A version that uses SceneManager with just a rectangle works, and can be found here.
I want the top left of the canvas to be aligned with the top left of the screen, but it doesn't do this and I'm not sure why. my debugging hasn't fixed it. I've looked on p5.js github, but couldn't find any very similar issues, and to be honest the problem is probably in my code (and not an issue with p5.js).
In my code, I am using a lib that allows me to have different scenes, so the code that actually is running (the draw function), is in game.js. You will find the code I have written there.
I would be interested to see what setting the padding, margin (and maybe even border) on the HTML and Body would do.
html, body {
border: 0px;
margin: 0px;
padding: 0px;
}
Try this out, looks like your original CSS for the canvas element has some commas where there should be semi-colons.
canvas {
display: block;
position: absolute;
left: 0;
top: 0;
}
The problem I was having was it was ambiguous where the canvas should go, so CSS does whatever it wants with the canvas. By doing
canvas {
display: block;
position: absolute;
left: 0;
top: 0;
}
It forced CSS to place it in the top left. Thanks to #Andrea and #jdevo for coming up with the solution to my problem.
Hi there I am working on this site - http://smudgedigital.com/animation-projects/ and have an issue with the gallery on the projects page. The images should all be a circle and when rolled over the the image should remain a circle and have a hover black state.
However despite the site working fine I have recently noticed that the circles are no longer circles in google chrome. The are in fact square on all states.
I have looked through this site to find any answers but none of them seem to work. I have tried using the border radius code for all browsers;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
but it does not seem to pick it up, even when I use the !important tag. I have also tried using pixels instead of percent. When I use the inspect element tool I can add this;
.view img {
display: block;
position: relative;
border-radius: 100%;
}
and it works on the normal state, but when I put it into my site css it does not appear.
I have seen some people say that google just doesnt understand the overflow: hidden property and it has nothing to do with the border radius, however overflow: hidden does appear.
Any help would be greatly appreciated. I have built the site on wordpress.
Thanks,
This looks to be a known bug in Chrome I'm afraid. It's related to transition mainly, and how the order of parent/child becomes when the DOM is being painted during a transition:
https://code.google.com/p/chromium/issues/detail?id=157218
As an alternative you could maybe make the entire circle including border and shadow increase in size. However I don't think that is the effect you want.
Please also see this thread on Stack Overflow: Bug with transform: scale and overflow: hidden in Chrome
Added
.view-first img {
transition: all 0.2s linear;
border-radius: 100%; /* added new */
}
removed
.view{
overflow:hidden; /* removed */
}
So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry.
I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp again...
I am completely baffled.
I've now uninstalled the IE11 update and they are once again nice and crisp in IE10... Has anyone else encountered this?
I've included a screen shot showing the images in the different browsers.
Here is a link to a jsfiddle, I don't have IE11 any longer to test but its the same markup and CSS that I am using: http://jsfiddle.net/3g52E/
Well i can see what is causing this problem. It's the border-radius of your ._ui.
Now i can't tell you why this happens. However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.
Use image element
<img src="http://i.imgur.com/DauuVHW.png" />
Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:
.block1 > div
{
position: relative;
overflow: hidden;
}
This will add the properties on ._ui _bre and ._ui _com.
Where the basic image properties are:
img
{
position: absolute;
left: 2px;
}
Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:
._bre._ui img
{
top: -68px;
}
._com._ui img
{
top: -24px;
}
This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.
jsFiddle
There is probably more elegant way to fix blurry images in IE 11.
In our app we have icons on buttons with round corners. Removing round corners or using <img> for icons were not options.
However, what worked for us was "classic" images optimization for retina displays, i.e. saving button background images with twice larger resolution and then specifying original size in background-size.
Looks great in IE 11 and on retina displays.
According to this:How to write a CSS hack for IE 11?
I added this code to my CSS:
#media all and (-ms-high-contrast:none){
*::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 }
}
With this browser hack the borders are not round anymore in IE11 but at least the background images are not blurry anymore. In any other browsers they are still round.
I need to have a curve-shaped stretchy footer fixed at the bottom of the browser window, where the curve is an image. I've mocked up a live example.
To minimize the loss of "clickable" real-estate in lower layers through the transparent part of the footer image, my instinct is to cut the image into several segments (red boxes in the example) and position them next to each other like so:
#arc-segment-1,
#arc-segment-2 {
position: fixed;
z-index: 2;
bottom: 0px;
}
#arc-segment-1 {
width: 5%; /* where this */
height: 82px;
left: 0;
background-image: url(...);
}
#arc-segment-2 {
width: 5%;
height: 72px;
left: 5%; /* matches this */
background-image: url(...);
}
In most major browsers (not IE and FF), hairline fractures come and go between boxes as the window is resized, which is unacceptable.
Floating the image segments would solve the problem, but I have not found a way of implementing it that still fixes the footer to the bottom and preserve the mentioned "clickability". Is there a better approach to this problem than mine, or can it somehow be remedied?
Note regarding the example given: The curve image itself in the example has not yet been cut, it is still a single image. Also, the blue boxes are not a concern, they will not stretch so they are not affected by the problem.
I'd be interested in both the reasons of this behavior and any workable solution. Thanks.
you can add pointer-events: none; so you can click below
I stumbled over a somewhat workable solution myself while reading at the W3C:
If the width-property of the segments is taken out and both left and right properties are given, say for a 10% wide segment in the middle of the screen:
#arc-segment-3 {
left: 45%;
right: 45%;
}
It will behave like originally intended, although some browsers now seem to overlap the segments with a hairline instead. In my case, this is a much smaller problem as the texture of the arc is weak enough not to be much noticeable. Anyone with a pixel-perfect approach?
Working in Chrome, I found the AngularJS animations appear to break elements that have position: fixed applied to them. I can not reproduce the issue in Safari or Firefox.
I'm unsure if I'm doing something wrong, or if I could be doing something better to fix the issue.
I have a Plunker illustrating the issue here: http://plnkr.co/edit/fhI7M7ev75AGYzesf4GB?p=preview
To reproduce, the following must be done (as the layout of Plunker seems to fix the issue):
Run the Plunk (in Chrome)
Breakout the preview into a new window
Reduce the height to show just the colored box
Click on the "Click Me" button and then scroll to witness issue
If you reload the scrolling list page the top banner will be correctly fixed to the top.
The CSS for the top banner is simple:
.fplcd-top-banner {
background-color: #7c7c7c;
background: linear-gradient(to bottom, #7c7c7c, #666666);
height: 50.15745px;
left: 0;
margin-bottom: 7.16535px;
padding: 7.16535px;
position: fixed;
top: 0;
width: 320px;
z-index: 10; }
If you edit the plunk and remove the animation (at the bottom of the CSS file, comment above them) styles, the issue no longer persists.
Is this a known issue, or am I doing something just odd enough that would knock Chrome out of whack? In either case, is there a tweak that can be done to fix this up?