Difference between revisions of "Scioly.org:Wiki Issues"

Please use this page for reporting (using the template below) incorrect or unexpected behavior by the Wiki that is likely the result of code and therefore requires the attention of site administrators to repair. Reference Template:Report for parameter descriptions.

{{Report
|status=
|subject=
|comment=
|pages=
|screenshots=
|device=
|operating_system=
|browser=
|submitter=
|date=
}}

Hard Refresh/Clearing Browser Cache

Web browsers store and access website data locally to decrease loading times, so the version of Scioly.org your browser displays may not show our latest updates. Before submitting a report, try hard refreshing the affected page to load its latest version and see if the problem persists. Instructions for hard refreshes or clearing browser caches are listed in the table below for several browsers and operating systems.

Web Browsers	Operating Systems
Web Browsers	Android	iOS/iPadOS	macOS	Windows
Google Chrome	Settings (Chrome) > History > Clear browsing data > Cached images and files > Clear data		Shift + Click Reload OR Cmd + Shift + R	Ctrl + Click Reload OR Ctrl + F5 OR Ctrl + Shift + R
Internet Explorer	Involves clearing cache for ALL apps: Settings > Storage > Internal storage > Cached data > OK	N/A	Ctrl + Click Reload OR Ctrl + F5
Microsoft Edge		Settings (Edge) > Privacy > Clear browsing data > Cache > Clear browsing data > Clear	Ctrl + Click Reload OR Ctrl + F5
Mozilla Firefox		Settings (Firefox) > Data Management > Website Data > Clear all Website Data	Shift + Click Reload OR Cmd + Shift + R	Ctrl + F5 OR Ctrl + Shift + R
Safari	N/A	Settings App > Safari > Clear History and Website Data	Shift + Click Refresh OR Command + Option + E, then Command + R	N/A

Reports

Comment: On small screens, "showing" hidden content sometimes extends beyond the width of the page. This is caused by child images or text that force the parent box to stretch to accomodate them.
Page(s): Boomilever#2020_parameters, Reach_for_the_Stars#Star_Charts
Environment: iPhone SE / iOS 14 / Safari
Date: 2020/08/05

Comment: This was resolved by adding a { word-break: break-all; } which forces exceptionally long links to break rather than extend the width of its parent element and img { height: auto; max-width: 100%; } which puts a cap on the width of all images so they do not extend beyond the width of the page. The width maximum should still work on images that have a custom width specified inline.
Submitter: bernard
Date: 2020/08/05

Comment: a { word-break: break-all; } was removed because it forced words labels of links to break mid-word. Instead, all hyperlinks should be labelled and not pasted unlabelled in plain URL form as the length of some URLs can cause these page width issues.
Submitter: bernard
Date: 2020/08/05

Comment: Pages for national tournaments have results tables that are too short and a light grey box that is wider than the table.
Page(s): North Carolina State University 2020 (also applies to other similar pages)
Environment: macOS Catalina (10.15) / Safari
Date: 2020/08/05

Comment: This was resolved by removing style="width:70%; height:50px" border="1" from tables. This issue affected all national tournament pages.
Submitter: bernard
Date: 2020/08/05

Comment: Separate tables display on the same line when a page is scaled down.
Page(s): User:Bernard#Science_Olympiad_Event_Placings
Environment: macOS Catalina (10.15) / Safari
Date: 2020/08/05

Comment: This issue appears to have been resolved while addressing other styling issues with tables.
Submitter: bernard
Date: 2020/08/06 10:59 PT

Date: 2020/08/05

Comment: Currently, the Wiki loads the site menu from a static HTML file because the PHP used to display usernames in the menu interferes with MediaWiki loading.
Submitter: bernard
Date: 2020/08/05

Comment: This CSS code below will fix a lot of the issues with tables, vector tabs, and other quality of life enhancements. It will be best if the previous values were replaced with the new values below.
/* * Bernard, pls fix. :) */ @media (max-width: 2000px){ table.wikitable { display: inline-block; max-width: 100%; width: fit-content; overflow-x: auto !important; border: 0; background-color: inherit; } } /* * Fixes Watch list vector tab position (It was positioned too high) */ li#ca-unwatch, li#ca-watch { margin-top: 0 !important; } .vectorTabs #ca-unwatch.icon a, .vectorTabs #ca-watch.icon a { padding-top: 2.15em !important; } @media (max-width: 600px) { #left-navigation, #right-navigation { margin-top: 2.5em !important; } #simpleSearch #searchInput { width: 40px !important; } } div.mw-body { margin-top: 0.4em !important; box-shadow: 0px 0px 10px 5px darkgray; /* Optional shadow. You can remove "box-shadow" if you don't like it. */ border: 0 !important; } div#mw-head { background-color: transparent !important; }

Submitter: Nyda
Date: 2020/08/05

Comment: Thank you, Nydauron! I have implemented most of your suggested changes.
Submitter: bernard
Date: 2020/08/05

Comment: Found an issue where if screen width gets too small, top headings aren't wrapped and continue off-screen. This solution isn't the best solution (if the word has no spaces, it might just break after each character) but does get the job done.

Please replace .mw-body .firstHeading with the following lines:

.mw-body .firstHeading {
    overflow: visible;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

Environment: Firefox 78.0.2, Chrome Version 83.0.4103.116, Android Firefox 68.11.0, Android Chrome Version 74.0.3729.186
Submitter: Nyda
Date: 2020/08/05

Comment: Thank you, Nydauron! I have added your suggested change.
Submitter: bernard
Date: 2020/08/05

Comment: Since Bernard complained about it, I might as well fix it. :P The following CSS code makes the left vector tabs flush with the section body. Please replace the old code with the following:

@media (max-width: 980px) {
    #left-navigation {
        margin-left: 176px;
    }
}
@media (max-width: 900px) {
    #left-navigation {
        margin-left: 81px;
    }
}
@media (max-width: 600px) {
    #left-navigation {
        margin-left: -39px;
    }
}

Environment: Firefox 78.0.2, Chrome Version 83.0.4103.116, Android Firefox 68.11.0, Android Chrome Version 74.0.3729.186
Submitter: Nyda
Date: 2020/08/06

Comment: Thanks, Nydauron! These were actually the original numbers before we removed the 1px wide border from div.mw-body yesterday. Mistakenly thought I needed to shift these numbers by 1px too. Should be fixed now!
Submitter: bernard
Date: 2020/08/06 09:55 PT

Comment: Hugo pointed out that there is a subtle color shift between the title of a table and outside the table element. This is a pretty subtle difference that might be hard to spot. Since tables are displayed as inline-block instead of table, the following code is needed:

table.wikitable caption {
    background-color: #ffffff;
    width: 100%;
}

Page(s): Dynamic_Planet/Glaciers#Distribution_of_Glaciers
Environment: Firefox 78.0.2, Chrome Version 83.0.4103.116, Android Firefox 68.11.0, Android Chrome Version 74.0.3729.186
Submitter: Nyda
Date: 2020/08/06

Comment: Thanks, Nydauron! I applied the changes and the styling should be fixed.
Submitter: bernard
Date: 2020/08/06 09:52 PT

Comment: I modified styling so that table.wikitable and table.wikitable caption adopt background-color: inherit; while table.wikitable tr adopts background-color: #f8f9fa;. This approach allows for the caption to match non-white background colors like on User:Pepperonipi/Projects/Project_Regionals.
Page(s): User:Pepperonipi/Projects/Project_Regionals
Submitter: bernard
Date: 2020/08/06 10:53 PT

Comment: Attempting to delete a page leads to a Fatal exception of type "Wikimedia\Rdbms\DBQueryError" error.
Environment: Safari 13.1.2
Submitter: pepperonipi
Date: 2020/08/06

Comment: The error results from Extension:GeoData attempting to reference the SQL table wikiv2_geo_tags which does not exist. Though an error appears, pages appear to successfully delete. The error disappears when the extension is not loaded.
Submitter: bernard
Date: 2020/08/06 10:05 PT

Comment: This was fixed by reinstalling Extension:GeoData, which suggests that maybe the wrong version of the extension had been previously installed.
Submitter: bernard
Date: 2020/09/03 14:32 PT

Comment: The character è, "Latin small letter E with grave," displays correctly in normal text, but displays as capital E with diaresis in boldface. This messes up words like vigenère (displayed as vigènere) and solfège (displayed as solfège). This is a problem with the font Avenir itself, as a character map reveals that Avenir's non-ASCII characters are weirdly mapped (although Avenir Book is mapped correctly). This problem doesn't occur on the forums, because the forums uses Avenir LT 95 Black instead of plain old Avenir as the boldface font. Changing the text's font-weight to the forums' default 900 instead of the wiki's default 1000 fixes the problem.
Page(s): Sounds of Music, Codebusters
Environment: Windows and Android / Edge 84.0.522.52 and Chrome 84.0.4147.105, but this issue is independent of browser
Submitter: gz839918
Date: 2020/08/06

Comment: Thanks for pointing this out, gz839918! I applied your suggested font-weight: 900; to .mw-headline, strong, and b elements.
Submitter: bernard
Date: 2020/08/06 09:50 PT

Comment: I also added an exception to restore h2 .mw-headline to its original styling, font-weight: normal.
Submitter: bernard
Date: 2020/08/06 10:16 PT

Comment: The problem persists in pages like Number of Teams per State, where the Unicode dagger doesn't display correctly beside the name of states with two Division C bids. This seems to be related to styles specifically for <th> elements. Would it be helpful to remove Avenir entirely, and only use Avenir LT 95 Black for boldface? There may be more pages we have yet to find that have this problem.
Submitter: gz839918
Date: 2020/08/12

Comment: I've changed /src/css/main.css which the Wiki also relies on so that it references /src/fonts/avenir-medium.ttf instead of /src/fonts/avenir-heavy.ttf for font weights 800 and above but below 1000. A side effect is that there is less continuity between font weights, i.e. it is either slightly bold or very heavy, but more characters should appear correctly.
Submitter: bernard
Date: 2020/09/03 14:32 PT

Comment: I noticed in the CSS for #left-navigation, there was a pixel difference between the max-width: 980px and min-width: 982px. Sure enough, this causes the left vector tabs to be positioned incorrectly when the screen width is between 980 and 982px. Changing min-width to 980 should solve the problem.

@media screen and (min-width:980px) {
 /* ... */
 #left-navigation {
  margin-left:11em
 }
 /* ... */
}

EDIT: After realizing banners on the wiki break the current nav, #mw-navigation will be redone completely. This @media change will be included in the new nav, so please don't waste your time fixing an already broken nav. :)

Environment: Firefox 79.0, Chrome Version 84.0.4147.105
Submitter: Nyda
Date: 22:45, 6 August 2020 (UTC)
Updated: 21:30, 7 August 2020 (UTC)

Comment: fit-content is not a property in Firefox. However, -moz-fit-content does work. For old versions of Edge and IE, width: auto will be used.

@media (max-width: 2000px){
    table.wikitable {
        background-color: inherit;
        border: 0;
        display: inline-block;
        max-width: 100%;
        overflow-x: auto;
        /* \/ \/ \/ Add this \/ \/ \/ */
        width: auto; /* If browser is literally older than East */
        width: -webkit-fit-content; /* Earlier versions of Chrome, Opera, and Safari */
        width: -moz-fit-content; /* Firefox */
        width: fit-content; /* Everyone else */
    }
}

Page(s): User:Nydauron#Results
Environment: Firefox 79.0, Android Firefox 68.11.0, Edge 42.17134.1.0
Submitter: Nyda
Date: 22:45, 6 August 2020 (UTC)

Comment: This change has been made.
Submitter: bernard
Date: 2020/09/03 14:32 PT

Comment: Add clear: both; to .mw-body-content h1, .mw-body-content h2, .mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 so that headers clear floating elements preceding them.
Page(s): User:Jaspattack
Submitter: bernard
Date: 2020/08/08 17:09 PT

Comment: Change clear: both; to clear: left; so that results tables do not attempt to clear long navboxes. Not a complete fix because the header will separate from the results table on smaller screens but the best we can do for now.
Page(s): Parkview High School (Missouri)
Submitter: bernard
Date: 2020/08/09 13:33 PT

Comment: This change has been made.
Submitter: bernard
Date: 2020/09/03 14:32 PT

Click here to edit this page.

@@ Line 266: / Line 266: @@
 {{Report
-|status=progress
+|status=resolved
 |subject=DB Error occurs on page deletion
 |comment=Attempting to delete a page leads to a <code>Fatal exception of type "Wikimedia\Rdbms\DBQueryError"</code> error.
@@ Line 279: / Line 279: @@
 |submitter=bernard
 |date=2020/08/06 10:05 PT
+}}
+{{Report
+|status=response
+|comment=This was fixed by reinstalling Extension:GeoData, which suggests that maybe the wrong version of the extension had been previously installed.
+|submitter=bernard
+|date=2020/09/03 14:32 PT
 }}
@@ Line 307: / Line 313: @@
 }}
 {{Report
-|status=open
+|status=resolved
 |comment=The problem persists in pages like [[Number of Teams per State]], where the Unicode dagger doesn't display correctly beside the name of states with two Division C bids. This seems to be related to styles specifically for <code>&lt;th&gt;</code> elements. Would it be helpful to remove Avenir entirely, and only use Avenir LT 95 Black for boldface? There may be more pages we have yet to find that have this problem.
 |submitter=gz839918
 |date=2020/08/12
+}}
+{{Report
+|status=response
+|comment=I've changed <code>/src/css/main.css</code> which the Wiki also relies on so that it references <code>/src/fonts/avenir-medium.ttf</code> instead of <code>/src/fonts/avenir-heavy.ttf</code> for font weights 800 and above but below 1000. A side effect is that there is less continuity between font weights, i.e. it is either slightly bold or very heavy, but more characters should appear correctly.
+|submitter=bernard
+|date=2020/09/03 14:32 PT
 }}
@@ Line 336: / Line 348: @@
 {{Report
-|status=open
+|status=resolved
 |subject=Table fit-content width not working
 |comment=<code>fit-content</code> is not a property in Firefox. However, <code>-moz-fit-content</code> does work. For old versions of Edge and IE, <code>width: auto</code> will be used.
@@ Line 358: / Line 370: @@
 |submitter=Nyda
 |date=22:45, 6 August 2020 (UTC)
+}}
+{{Report
+|status=response
+|comment=This change has been made.
+|submitter=bernard
+|date=2020/09/03 14:32 PT
 }}
@@ Line 370: / Line 388: @@
 }}
 {{Report
-|status=open
+|status=resolved
 |comment=Change <code>clear: both;</code> to <code>clear: left;</code> so that results tables do not attempt to clear long navboxes. Not a complete fix because the header will separate from the results table on smaller screens but the best we can do for now.
 |pages=[[Parkview High School (Missouri)]]
 |submitter=bernard
 |date=2020/08/09 13:33 PT
+}}
+{{Report
+|status=response
+|comment=This change has been made.
+|submitter=bernard
+|date=2020/09/03 14:32 PT
 }}

Revision as of 21:42, 3 September 2020

Hard Refresh/Clearing Browser Cache

Reports

Navigation menu

Search