search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
742 stars 65 forks source link

illuminati.mp - site is not usable #17569

Closed webcompat-bot closed 6 months ago

webcompat-bot commented 6 years ago

URL: https://illuminati.mp/

Browser / Version: Firefox 61.0 Operating System: Windows 10 Tested Another Browser: Yes

Problem type: Site is not usable Description: The login form is not clickable on Firefox only. This works on all other internet browsers. Steps to Reproduce:

From webcompat.com with ❤️

WesleyBranton commented 6 years ago

Confirmed that issue is present on Firefox, but not Google Chrome. I have changed this bug's status to Needs Diagnosis.

karlcow commented 6 years ago

This is working for me on Firefox NIghtly 63 in a fresh profile without any blockers or tracking protection.

WesleyBranton commented 6 years ago

That's not the case. I'm also running Nightly 63 with a clean profile and I have issues with it. There appears to be an element that has a z-index and is placed above everything else on the page. For some reason this is only picked up by Firefox.

Could it be an OS-specific issue? I'm on Windows 10

karlcow commented 6 years ago

@WesleyBranton It could be a specific os issue. I'm on macos. @softvision-oana-arbuzov can you reproduce on Windows 10.

karlcow commented 6 years ago

Let's see. This is what I see in Firefox Nightly 63.0a1 (2018-07-05) (64-bit).

Screenshot Description

And

Screenshot Description

Then entering login/password

Screenshot Description

Then selecting I'm not a robot. images selection, and verify.

Screenshot Description

and finally clicking LOGIN.

It obviously fails and redirects me to the login page again with empty fields.

but the form was clickable for me.

Screenshot Description

This is what we get from the console:

JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js:2:542
[Show/hide message details.] ReferenceError: jQuery is not defined[Learn More] wlq_custom.js:1:1
<anonymous>
https://illuminati.mp/wp-content/plugins/wishlist-quiz/js/lib/wlq_custom.js:1:1
unreachable code after return statement[Learn More] jquery.tooltip.wlp.js:38:2
[Show/hide message details.] TypeError: $.validator.addMethod is not a function[Learn More] jquery.validate.js:261:1
<anonymous>
https://illuminati.mp/jsc/jquery.validate.js:261:1
<anonymous>
https://illuminati.mp/jsc/jquery.validate.js:15:3
<anonymous>
https://illuminati.mp/jsc/jquery.validate.js:9:2
Loading mixed (insecure) display content “http://assets.illuminati.mp/media/wp-content/uploads/2016/07/20161833/illuminati-gray-background-vert.jpg” on a secure page[Learn More]
jquery-2.2.3.js:5799:18
Loading mixed (insecure) display content “http://assets.illuminati.mp/media/wp-content/uploads/2016/07/20161833/illuminati-gray-background-vert.jpg” on a secure page[Learn More] jquery.waitforimages.min.js:9:1868
SyntaxError: expected expression, got '<'[Learn More] login:660:2
Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (420700 px). Occurrences of will-change over the budget will be ignored. login
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
ready for rock full-scripts.js:4:25782
The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature.
softvision-oana-arbuzov commented 6 years ago

@karlcow I was able to reproduce the issue. I can't get focus on the fields of the "Login" form and can't click the buttons either. screenshot_2

Workaround: Using "Tab" keyboard button I can get focus on the fields and using "Enter" I can bypass the Captcha and sign in.

Tested with: Browser / Version: Firefox Nightly 63.0a1 (2018-07-05), Firefox Release 61.0.1 Operating System: Windows 10, MacOS 10.13.5

karlcow commented 6 years ago

oh amazing today, I can't get the focus on macos too. :) Ok now we are talking! Ah WAIT! the focus ability depends on the width of the viewport.

around ~768px wide, the form gains/looses the ability to be focused. Let's

  1. remove most of the features of the page
  2. add outlines
  3. background-color with progressive opacities

This is NON clickable input

Screenshot Description

This is clickable.

Screenshot Description

It's one of these instances where I wish we could trigger a full diff of all the styles for the one pixel differences in between the two layouts.

So this is something related to the combination of

.hideloggedin{
visibility: visible !important;
display: initial !important;

and https://illuminati.mp/wp-content/themes/jupiter/assets/stylesheet/min/full-styles.css https://illuminati.mp/wp-content/plugins/3js_composer_theme/assets/css/js_composer.min.css

Their CSS files have a lot of z-index, which could be a recipe for disaster given the number of layers.

Let's bi-sect a bit more.

.hideloggedin{
visibility: visible !important;
display: initial !important;

/* from full-style.css */
.vc_row {
 position:relative
}

/* from js_composer.min.css */

.vc_clearfix:after,.vc_column-inner::after,.vc_el-clearfix,.vc_row:after {
 clear:both
}

.vc_row:after,.vc_row:before {
 content:" ";
 display:table
}

@media (min-width:768px) {
 .vc_col-sm-1,.vc_col-sm-10,.vc_col-sm-11,.vc_col-sm-12,.vc_col-sm-2,.vc_col-sm-3,.vc_col-sm-4,.vc_col-sm-5,.vc_col-sm-6,.vc_col-sm-7,.vc_col-sm-8,.vc_col-sm-9 {
  float:left
 }

grmph…

karlcow commented 6 years ago

I wonder if it's a variation of https://bugzilla.mozilla.org/show_bug.cgi?id=1439492

karlcow commented 6 years ago

And a reduced markup.

<body class="home page-template-default page page-id-985 wpb-js-composer js-comp-ver-5.1.1 vc_responsive mpc-loaded loaded" itemscope="itemscope" itemtype="https://schema.org/WebPage" data-adminbar="">
  <!-- Target for scroll anchors to achieve native browser bahaviour + possible enhancements like smooth scrolling -->
  <div id="top-of-page"></div>
  <div id="mk-boxed-layout">
    <div id="mk-theme-container" class="trans-header">
      <div id="theme-page" class="master-holder  clearfix" itemscope="itemscope" itemtype="https://schema.org/Blog">
        <div class="mk-page-section-wrapper">
          <div id="page-section-2" class="mk-page-section self-hosted   full_layout full-width-2 js-el js-master-row    welcomesection center-y mk-in-viewport" data-mk-component="FullHeight" data-fullheight-config="{&quot;min&quot;: 100}" data-intro-effect="false" style="min-height: 872px;">
            <div class="page-section-content vc_row-fluid page-section-fullwidth">
              <div class="mk-padding-wrapper" style="background-color: gold;">
                <div style="" class="vc_col-sm-12 wpb_column column_container   _ height-full mpc-column">
                  <div class="wpb_row vc_inner vc_row vc_row-fluid  hideloggedin  attched-false    mpc-row">
                    <div class="wpb_column vc_column_container vc_col-sm-4 mpc-column">
                      <div class="vc_column-inner ">
                        <div class="wpb_wrapper">
                          <div id="text-block-5" class="mk-text-block   logintabs">
                            <div class="WishListMember_LoginMergeCode">
                              <div id="login-form-imp">
                                <div class="wlm_regform_container wlm_regform_new_user">
                                  <form action="https://illuminati.mp/wp-login.php" method="post" id="loginform" data-empty="" class="wlm_inpageloginform sl-defaults">
                                    <div class="username-field" id="login-username-field">
                                      <div class="wlm_form_group">
                                        <input type="text" class="wlm_input_text sl_field sl-defaults" name="log" id="wlm_username_field" value="" size="25" required="" style="z-index: 1;">
                                      </div>
                                    </div>
                                  </form>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>
karlcow commented 6 years ago

The gold background here is mk-padding-wrapper

Screenshot Description

Then reducing the size of the viewport (which makes it clickable.)

Screenshot Description

karlcow commented 6 years ago

I'm pretty sure it would be possible to trim a bit more the markup.

I don't think the mk-padding-wrapper box has something to do with it. It was by chance I guess.

karlcow commented 6 years ago

I'm leaving it as-is for now, but there is something fishy definitely.

karlcow commented 6 years ago

I will be away for the next two weeks so if someone wants to take it from there.

karlcow commented 6 years ago

Ah maybe I found. There's a big wrapping div div.wpb_row:nth-child(3) which contains the form elements.

and nothing is clickable inside this. when you check the layout you will noticed that it is 0x16.5 pixels.

Screenshot Description

Then if I set an outline on this. I detect something on the left side of the screen.

Screenshot Description


.hideloggedin {
    visibility: visible !important;
    display: initial !important;
}

.vc_row {
    position: relative;
}

.mpc-row {
    display: block;
}

.mpc-row {
    position: relative;
}

.mk-page-section .vc_row-fluid {
    z-index: 10;
}

.mk-fullwidth-true.vc_row, .vc_inner.vc_row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mk-page-section .vc_row-fluid {
    position: relative;
}

We can see that it is dependent on a display: initial !important

Screenshot Description

which resolves to an inline. I I remove the display: initial!important, I get 

.hideloggedin {
    visibility: visible !important;
    /* display: initial !important; */
}

Screenshot Description

and everything is clickable again.

Another way to do it 

.mk-page-section .vc_row-fluid {
    position: relative;
    display: block !important;
}

I created a testcase, but I can't really reproduced. except for a weird rendering artefacts. https://codepen.io/webcompat/pen/EeKKvP?editors=1100

order: Firefox Nightly, Chrome Canary, Safari Tech Preview ping @dholbert

Screenshot Description

dholbert commented 6 years ago

I'm not sure why the mouse events aren't making it to the input element here. I filed https://bugzilla.mozilla.org/show_bug.cgi?id=1487937 on the issue in Firefox, with a reduced testcase (and a second testcase that's broken in WebKit/Blink as well, though working in Edge).

Anyway - I think @karlcow is right on, with the suggestion that the site might want to remove the bizarre display: initial styling. That makes their div into an inline-level element, and all of its children end up interrupting it and triggering the complex "block-in-inline split" behavior, which the site doesn't actually need here.

adamopenweb commented 6 years ago

Reaching out by site contact form. https://www.illuminatiofficial.org/contact-the-illuminati-info/

softvision-oana-arbuzov commented 5 years ago

The issue is still reproducible on my side.

Tested with: Browser / Version: Firefox Nightly 69.0a1 (2019-06-10) Operating System: Windows 10 Pro

CliftonIAM commented 1 year ago

I've been a member of illuminati.mp since 2017. I've signed the oath, read the first testament and taken the test. I suddenly have no access to the site, only a pop-up for login credentials that looks nothing like the original. My credentials don't work

dholbert commented 1 year ago

@CliftonIAM I can reproduce that, but it's quite different from the thing that was being tracked in this ticket (from 2018).

You should reach out to the folks who operate the site (who are not here on this ticket) to find out what's causing this new issue.

CliftonIAM commented 1 year ago

Thanks, I appreciate the effort. I've sent an email, hopefully it gets resolved soon

Kind Regards, Mickey Freeman

On Thu, Jul 20, 2023, 9:13 PM Daniel Holbert @.***> wrote:

@CliftonIAM https://github.com/CliftonIAM I can reproduce that, but it's quite different from the thing that was being tracked in this ticket (from 2018).

You should reach out to the folks who operate the site (who are not here on this ticket) to find out what's causing this new issue.

— Reply to this email directly, view it on GitHub https://github.com/webcompat/web-bugs/issues/17569#issuecomment-1644891090, or unsubscribe https://github.com/notifications/unsubscribe-auth/BBNALH6X2UOPX6VPHX7FOHLXRHQTRANCNFSM4FIGRGYQ . You are receiving this because you were mentioned.Message ID: @.***>

ksy36 commented 6 months ago

I'm getting the login popup as well, not sure if the original issue is still reproducible and there is no way for us to test it without credentials.