Custom overlaid HTML image captions displaying oddly in both Chrome and Opera

egoselfaxis
egoselfaxis used Ask the Experts™
on
I've been working on a custom WordPress site that's using the Understrap theme development framework (which is based on Bootstrap 4).  

Here is the site URL: http://dev.movingpicture.com/

Right now I'm having a problem with some overlaid image captions that I've created using custom CSS (3 different styles).  

If you have a look at to the sections with these headings, these are the image captions that I'm referring to:

1) Check out our services. Then get a quote.
2) Used by hundreds of professionals. Like you.
3) Read the case studies

These overlaid captions are displaying properly in the latest versions of Firefox, Edge, and IE11 .. but are displaying very oddly in Chrome and Opera (with the captions consistently overlapping the bottoms of the images .. in some cases making them invisible).  

Why is this happening in only Chrome and Opera?  And how can I fix my custom CSS so that these captions display consistently across the different browsers (meaning the same way they display in Firefox, Edge and IE11)?    

Although you can simply inspect the underlying source code .. here are my custom CSS snippets for the sake of convenience:

#homepage-services .vc_figure-caption {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: .25em .5em;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color:#fff;
	font-weight:bold;
	font-size:26px!important;	
}

#homepage-professionals .vc_figure-caption {
    position: absolute;    
    left: 0;
    bottom: 0;
    padding: .25em .5em;
	margin:5px;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color:#fff;
	font-weight:normal;
	background-color: rgba(0,0,0,.4);
	font-size:12px!important;
	white-space: pre-line!important;
}

#homepage-case-studies .vc_figure-caption {
    position: absolute;    
    top: 10px;
	left: 10px;	
    padding: .25em .25em;
	margin: 5px;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color:#fff;
	font-weight:bold;
	font-size:16px!important;
}

Open in new window


Please advise.  Thanks!

- Yvan
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Consultant & Challenge Subduer
Top Expert 2009
Commented:
Strange. The positioning context is being computed differently. It's probably related to the use of Flex. Fortunately a workaround is quite simple. Give "position:relative" to ".wpb_single_image".

Author

Commented:
Ah -- yes!  You were correct.  Setting .wpb_single_image to position:relative did the trick.  

Thank you sir!

- Yvan

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial