Hi I original searched google for artifacts … and all answers were regarding borders, shadows, padding, margins and backgrounds, which is why I asked specifically for a css solution. Over time I found the identifiers in my sight and I wrote some code just now, it looks pretty good in Chrome now but not good in Edge maybe worse yet you say good in edge. It is a hair and it looks like tiny circumstance change the reaction a tiny bit. I don’t know what the changes could be maybe browser settings. While looking at every slide up there I noticed something, the hair is the edge of the slide next to it, some of the vertical lines disappear half way up because the slide before has a tonal or colour change that has more contrast to the white ground at the bottom. I have one slide of a Film Winder that has a line on the bottom on every browser, I will check that slide tomorrow to see if it might be smaller or have some other deviation from the rest. I would like to thank you for you time and effort but I would like the simplest fastest solution possible, it just occurred to me how easy this might be, if the problem is the slide next to it, then a thin white border on all the slides might just do the trick! Let me play around with it tomorrow and I’ll get back to you. Now I don’t know if this code did anything the problem has been changing constantly throughout. If you’re interested this is the css:
#metaslider-id-371 #metaslider_container_371 #metaslider_371
.metaslider .metaslider-flex .class-slide-shows .ms-theme-default-base .metaslider-371 .flexslider .flex-viewport .slides .slide-404 ms-image clone {
background-color: #ffffff !important;
border: none !important;
box-shadow: none !important;
outline: none !important;
padding: 0 !important;
margins: 0 !important;
}
Thanks
Chris
The issue you reported could be CSS related to width or margin (but can’t confirm), however what you call artifact was just the first slide not taking 100% the slideshow’s width and thus a couple of pixels of the next slide was revealed. This likely as result of the WordPress theme’s CSS getting on the way.
Regards
Yes,
I’m thinking a 2 mm white border on the shot or the container might do it, hopefully with css so I don’t have to doctor all the shots.
Thanks
I tried to do it with css but it didn’t work. I think that with the settings I have it’s behaviour is to do everything under the sun not to crop the shot, there’s not much to work with. I have one container and the slider which leaves no direct access the image and I have limited experience with css. I did do a test with some of the more problematic shots and it worked well, I opened them in Photoshop and put an inside stroke on them of 2 px in white replaced the old shots with the new ones and the lines disappeared on both chrome and Edge. It wont take long to do the rest, it’s pretty simple to automate the process in Photoshop. All I found on line when I first googled it pointed to padding, borders and container backgrounds coming from theme/plug-in defaults, I wonder how many actually are a loose container/photo fit because it sure wasn’t obvious at first, I really had to look to see it. any way give me a bit of time to switch them, then take another look.
Thanks again for your time.
Chris
If you have a chance, please switch for a minute to another WordPress theme just to see if the issue is gone. I suggest Twenty Twenty-Five theme. This will tell us if the problem is related to your current WordPress theme.
Regards
I am using Twenty Twenty-Five, thanks. I have found an agreeable solution, I have put a 2 pixel border on all the Industrial shots in the slider and it works perfectly on both edge and google. It won’t take much to do the other sliders too.
Thanks
Cool! I’m glad that solution did the trick.
Regards
@splurch84 If you appreciate the support you received here, please consider leaving a 5-star review to help support the MetaSlider team: https://ww.wp.xz.cn/support/plugin/ml-slider/reviews/
