Tagged: easyslider, google chrome, safari
-
AuthorPosts
-
October 14, 2013 at 1:24 pm #175035
Hi,
1
I have used EasySlider on my Enfold test site. As each new image appears in the slider, it makes text and images below, in the main content area of the page, nudge very slightly to left and then back.Once all of the image in EasySlider have run through once, this problem doesn’t happen any more. But if I leave the page and return to it, then the same problem happens.
I have tried using over and under-sized images in EasySlider, as well as exactly sized images. I have also used slide and fad options. But the problem still happens in each case.
2
The second question is regarding the caption in EasySlider. By default it appears in white, in a dark grey box, on the left side of the image. Is it possible to change the position to the right side, change the colour of the box and the font size and colour?Thanks.
————
Had another look at the first question, and see now that the slight shift in the main content area of the page, nudges down and up (before it was left, then right) – or both.
I also noticed that this shift of the main content does not happen if I click the left/right advance/back arrows in the main slider image – only when EasySlider plays automatically.
My Enfold test site is here: http://enamellers.org/bsoe/
————-
Another update on the odd EasySlider behaviour – the page content movement issue described only affects Chrome (I’m on version 30 on a Mac). EasySlider seems to behave well in Firefox, Safari and Opera.
- This topic was modified 11 years ago by Niels. Reason: Tested EasySlider page content movement fault in other browsers
October 15, 2013 at 4:36 pm #175941Hi Niels!
1) I’m actually on the same version of Chrome on OSX 10.8 and I’m not getting the nudge on the content below the slider at all. Do you have any browser add ons or plugins running in chrome?
2) No, the only thing that you could do easily would be to change the color via css. But it would need to be done for that specific instance based on the page ID, the content ID and class selector and then each slide.
You could also use inline styling on each caption text and title but its a bit hacky. Kriesi hadn’t added a lot of options to the easy slider to keep it “easy” because you can do pretty much anything with the LayerSlider slideshows.
Regards,
DevinOctober 15, 2013 at 5:13 pm #175963Thanks for your reply Devin.
I have a few plugins on Chrome, I’ve disabled them all and the issue still happens. I’m on OSX 10.6.8.
I have created a completely new page and put in a new EasySlider slide show… same problem.
I’ve just checked the page on a new PC running Windows 8 and Chrome v30… same problem. OK on Explorer.
The tiny 1 pixel movement is in all content below the EasySlider – but only on second, third or fourth column content. Any content on the left edge of the page does not move. Once the slide show has run through once, then the content remains stable, until the screen is refreshed or visited again.
This is the same on both PC and Mac, but only in Chrome.
Regarding the text boxes in EasySlider, no problem. I think I read on another support thread that LayerSlider will only run at full screen width, which is why I went for EasySlider – is that right?
************
I have uploaded a video on YouTube to help illustrate the strange movement behaviour problem in Chrome at:************
- This reply was modified 11 years ago by Niels. Reason: Uploaded video to illustrate the movement problem
October 18, 2013 at 2:24 pm #177387Hey!
Hmm, strange enough now I’m getting it on my end where previously I wasn’t. Let me tag Peter and see if he might have an idea since I sure don’t.
Regards,
DevinOctober 20, 2013 at 9:08 pm #178166Hi, mind trying to add this to your css to test if it removes the problem:
.avia-slideshow-inner li{ -webkit-transform-style: preserve-3d; /*fixes flickering issue when slider moves. usually other elements in other container flicker */ }
if it does we will add it to the next update
Cheers!
KriesiOctober 21, 2013 at 7:02 pm #178594Thanks Kriesi.
I’ve added the new code in the CSS.
Very strangely, it seems to have cured the problem in Chrome on the Mac, but not when viewed on my PC laptop (Windows 8).
October 21, 2013 at 7:58 pm #178613Hey!
We have updated the theme today with a few additional css fixes, would you mind testing that update as well?
Solves the issue for me across the board :)Cheers!
KriesiOctober 22, 2013 at 12:15 pm #179010Sounds good. To save my custom CSS from being over-written, should I update the theme by FTP?
Thanks.
October 23, 2013 at 4:55 pm #179781Hi!
Yes, please use ftp to update the theme ( https://vimeo.com/channels/aviathemes/67209750 ).
Best regards,
PeterOctober 23, 2013 at 7:06 pm #179871I have updated the them by FTP, now showing as version 2.4.1
Sorry to say though that the problem with the content ‘jumping’ is the same, on both OSX and Windows version of Google Chrome.
October 23, 2013 at 10:32 pm #179975located on your test site here: http://enamellers.org/bsoe/ ?
I cant see any issues on my installation any longer…
October 24, 2013 at 11:13 am #180195Yes, that’s the right URL Kriesi.
I installed the latest version of Enfold by FTP, copying the entire new Enfold folder over the old installation in the site’s Themes directory.
This morning, on Chrome (Mac and Windows) I see:
As each new image appears in the slider, it makes text and images below, in the main content area of the page, nudge very slightly to left and then back. All of the text lightens in colour slightly for a second. This only happens to content in the second (and greater) columns – first column content on the left border does not seem to be affected. Once all of the images in EasySlider have run through once, this problem stops. But if I refresh the page, then it all happens again.
October 24, 2013 at 12:54 pm #180216Hi!
looks fine for me, both in windows and mac. No strange fonts, no nudging. Since I can’t see the issue I cant really offer any more assistance, the last thing I can think of is to apply a css rule that we used in an eariler version of enfold to fix similar problems, maybe it also fixes this one:
.avia_textblock, .avia-icon-list, .avia-button, .avia-testimonial, .iconbox, .avia_message_box, .avia-team-member, .widget, .post, .team-img-container img, .team-social, .iconlist_icon, .fallback-post-type-icon, .fullsize .related_posts, .grid-image, .avia-caption-content, .avia-caption-title, .entry-content-wrapper, .avia_start_animation { -webkit-perspective: 1000; -webkit-backface-visibility: hidden; }
let me know if that helps. its a shot in the dark based on experience but not sure what else I can do if I can’t see the issue anymore :/
Regards,
KriesiOctober 29, 2013 at 12:41 pm #181990Hi,
thanks for that. I was still seeing the flickering on Mac and PC versions of Chrome – latest things I tried…
• Updated Enfold to latest version – content still flickering/jumping in Chrome.
• Built a brand new EasySlider page in the new version of Enfold – content still flickering/jumping in Chrome.
• Updated WordPress to the new 3.7 – content still flickering/jumping in Chrome.
• Copied and pasted your latest block of code into Custom CSS… success – content now stable!!!Thanks for all your help.
:o)
October 30, 2013 at 12:07 pm #182384I posted a similar question and got directed here. My problem is now fixed with Kriesi’s October 24, 2013 at 12:54 pm post (the long bit of CSS).
My problem was a little like this one, but not quite the same. For me, I saw the problem on Chrome, but it was much more pronounced on Safari. I’m using the latest version of Enfold and various versions of Mac OS and Safari. They all have the problem.
My problem wasn’t ‘jumping text’ but ‘blurring text’. All text after the Easy Slider would blur during the slide transition and then go solid again whist the image was paused between transitions. The blurring would happen even if the slider was off-screen. I say ‘blurred’ but perhaps a better description would be ‘thinned’. The font seemed to go to a lighter weight, but it had the effect of blurring the text.
Anyway, all fixed now with the { -webkit-perspective: 1000; and -webkit-backface-visibility: hidden; } change.
Thanks!
October 31, 2013 at 3:27 am #182781Hey!
Please try this on your custom.css or Quick CSS:
html { -webkit-font-smoothing: antialiased; }
Cheers!
IsmaelJanuary 16, 2014 at 5:25 pm #210759This reply has been marked as private.January 16, 2014 at 6:35 pm #210788Hey!
Have you tried this on Quick CSS?
.avia_textblock, .avia-icon-list, .avia-button, .avia-testimonial, .iconbox, .avia_message_box, .avia-team-member, .widget, .post, .team-img-container img, .team-social, .iconlist_icon, .fallback-post-type-icon, .fullsize .related_posts, .grid-image, .avia-caption-content, .avia-caption-title, .entry-content-wrapper, .avia_start_animation { -webkit-perspective: 1000; -webkit-backface-visibility: hidden; }
Best regards,
IsmaelJanuary 16, 2014 at 7:15 pm #210834Working, thanks.
-
AuthorPosts
- The topic ‘Enfold: EasySlider – two questions’ is closed to new replies.